Bootstrap names colors to convey meaning and are applied to HTML elements using CSS classes.

For Text color use: class = "text-*"

Primary color

<h4 class = "text-primary">Primary color</h4>

Secondary color

<h4 class = "text-secondary">Secondary color</h4>

Success color

<h4 class = "text-success">Success color</h4>

Danger color

<h4 class = "text-danger">Danger color</h4>

Warning color

<h4 class = "text-warning">Warning color</h4>

Info color

<h4 class = "text-info">Info color</h4>

For Background color use: class = "bg-*"

Primary Color

<h4 class="bg-primary">Primary color</h4>

Secondary Color

<h4 class="bg-Secondary">Secondary color</h4>

Success Color

<h4 class="bg-success">success color</h4>

Danger Color

<h4 class="bg-danger">danger color</h4>

Warning Color

<h4 class="bg-warning">warning color</h4>

Info Color

<h4 class="bg-info">Info color</h4>
Visit Bootstrap Colors

Bootstrap containers provide standardized padding and max-width vales at various windowsizes in an attempt to be responsive as is Bootstrap as a whole. Containers also center elements on the window width.


Container use: class = "container"

<div class="container" style="height: 100px; background: lightgrey;"></div>

Fluid Container use: class = "container-fluid"

Container-fluid spans the width of the window...no padding.

<div class="container-fluid; background: lightgrey;" style="height: 100px"></div>

Container with standard Bootstrap colors: class = "bg-success"

<div class="container-fluid bg-success" style="height: 100px"></div>
Visit Bootstrap Containers

Border classes can be assigned to any or all sides of an element. Control border thickness using css style = "border 3px;. Border class can be applied to divs, img tags etc."

<div class="border"></div>
<div class="border border-warning"></div>
<div class="border-top border-warning"></div>
<div class="border-left border-info"></div>
<div class="border-top border-right border-primary"></div>
<div class="border border-success rounded"></div>
Visit Bootstrap Borders

Alerts let users know something, and they do so using Js to determine when they appear and in this example, jquery.min.js to control how they can be dismissed.

Click to show Alert

   			<div class="alert alert-success alert-dismissible fade show" role="alert">
			<h4 class="alert-heading">Alert Example!</h4>
			                          Alert text goes here.
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
			<span aria-hidden="true">×</span></button></div>
<div>class="alert alert-primary</div>
<div>class="alert alert-secondary</div>
<div>class="alert alert-success</div>
<div>class="alert alert-danger</div>
<div>class="alert alert-warning</div>
<div>class="alert alert-light</div>
<div>class="alert alert-dark</div>
<div>class="alert alert-info</div>
Visit Bootstrap Alerts

Button classes can be applied to following 3 elements:
  • <button></button>
  • <a href=""></a>
  • <input type="" name="">

<button class="btn btn-primary">Your basic button</button>
Link as a button 
<a href="#" class="sameline btn btn-primary">Link as a button</a>
<input type="text" value="Type here" class="btn btn-primary"></input>

They come solid colors which darken on mouse hover:


<button type="button" class="btn btn-primary">Primary</button>

They come in outline which fill solid on mouse hover:


<button type="button" class="btn btn-outline-primary">Primary</button>

They come in small, medium (the default) and large:


<button type="button" class="btn btn-primary btn-sm">small</button>
<button type="button" class="btn btn-secondary">medium</code>
<button type="button" class="btn btn-primary btn-lg">large</button>

Visit Bootstrap Buttons