Buttons

    
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-success">Success</button>

Texts

Primary

Secondary

Warning

Danger

Success

    
<p class="text text-primary">Primary</p>
<p class="text text-secondary">Secondary</p>
<p class="text text-warning">Warning</p>
<p class="text text-danger">Danger</p>
<p class="text text-success">Success</p>

Alerts

This is a default alert. Check it out!
This is a primary alert. Check it out!
This is a secondary alert. Check it out!
This is a warning alert. Check it out!
This is a danger alert. Check it out!
This is a success alert. Check it out! 
    
<div class="alert alert-primary" style="width:300px;">
This is a primary alert. Check it out!
</div>
<div class="alert alert-secondary" style="width:300px;">
This is a secondary alert. Check it out!
</div>
<div class="alert alert-warning" style="width:300px;">
This is a warning alert. Check it out!
</div>
<div class="alert alert-danger" style="width:300px;">
This is a danger alert. Check it out!
</div>
<div class="alert alert-success" style="width:300px;">
This is a success alert. Check it out!
</div>

Badges

Primary Secondary Warning Danger Success

Cards

Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Grids

.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-6
.col-6