Buttons
Default
Primary
Success
Info
Warning
Danger
<a href="#" class="btn btn-default">Default</a>
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
Default
Primary
Success
Info
Warning
Danger
<a href="#" class="btn btn-default active">Default</a>
<a href="#" class="btn btn-primary active">Primary</a>
<a href="#" class="btn btn-success active">Success</a>
<a href="#" class="btn btn-info active">Info</a>
<a href="#" class="btn btn-warning active">Warning</a>
<a href="#" class="btn btn-danger active">Danger</a>
Buttons Sizes
Extra small
<a href="#" class="btn btn-default btn-xs">...</a>
Small
<a href="#" class="btn btn-default btn-sm">...</a>
Standart
<a href="#" class="btn btn-default">...</a>
Large
<a href="#" class="btn btn-default btn-lg">...</a>
Extra Large
<a href="#" class="btn btn-default btn-xl">...</a>
Buttons Outline
Create block level buttons or outline buttons, by adding .btn-outline.
Buttons Icons Glyphicon
Button
Button
Button
<a href="#" class="btn btn-primary">Button <span class="glyphicon glyphicon-eye-open"></span></a>
<a href="#" class="btn btn-primary">Button <span class="glyphicon glyphicon-star"></span></a>
<a href="#" class="btn btn-primary">Button <span class="glyphicon glyphicon-floppy-disk"></span></a>
Buttons Group
<div class="btn-group">
<button type="button" class="btn btn-default">...</button>
<button type="button" class="btn btn-default">...</button>
<button type="button" class="btn btn-default">...</button>
</div>
Buttons Toolbar
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">...</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">...</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">...</button>
</div>
</div>
Buttons Block
<button type="button" class="btn btn-primary btn-lg btn-block">...</button>
<button type="button" class="btn btn-default btn-lg btn-block">...</button>
Single button dropdowns
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">... <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">...</a></li>
<li class="divider"></li>
<li><a href="#">...</a></li>
</ul>
</div>
Split Button Dropdowns
<div class="btn-group">
<button type="button" class="btn btn-danger">...</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">...</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">...</a></li>
</ul>
</div>
Default pagination
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>