Buttons

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> Buttons with dropdown


<div class="btn-group"> <a href="#" class="btn btn-default">Default</a> <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <a href="#" class="btn btn-primary">Primary</a> <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <a href="#" class="btn btn-success">Success</a> <a href="#" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <a href="#" class="btn btn-info">Info</a> <a href="#" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <a href="#" class="btn btn-warning">Warning</a> <a href="#" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> Buttons with sizing
Large button Default button Small button Mini button

<a href="#" class="btn btn-primary btn-lg">Large button</a> <a href="#" class="btn btn-primary">Default button</a> <a href="#" class="btn btn-primary btn-sm">Small button</a> <a href="#" class="btn btn-primary btn-xs">Mini button</a>

Block level button
<a href="#" class="btn btn-default btn-lg btn-block">Block level button</a>

<div class="btn-group btn-group-justified"> <a href="#" class="btn btn-default">Left</a> <a href="#" class="btn btn-default">Middle</a> <a href="#" class="btn btn-default">Right</a> </div>

<div class="btn-toolbar"> <div class="btn-group"> <a href="#" class="btn btn-default">1</a> <a href="#" class="btn btn-default">2</a> <a href="#" class="btn btn-default">3</a> <a href="#" class="btn btn-default">4</a> </div> <div class="btn-group"> <a href="#" class="btn btn-default">5</a> <a href="#" class="btn btn-default">6</a> <a href="#" class="btn btn-default">7</a> </div> <div class="btn-group"> <a href="#" class="btn btn-default">8</a> <div class="btn-group"> <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div> </div>

<div class="btn-group-vertical"> <a href="#" class="btn btn-default">Button</a> <a href="#" class="btn btn-default">Button</a> <a href="#" class="btn btn-default">Button</a> <a href="#" class="btn btn-default">Button</a> </div>