Buttons
Left
Middle
Right
How to use
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
Standard button
Default
Primary
Success
Info
Warning
Danger
How to use
Standard button
<button type="button" class="btn btn-default">Default</button>
Provides extra visual weight and identifies the primary action in a set of buttons
<button type="button" class="btn btn-primary">Primary</button>
Indicates a successful or positive action
<button type="button" class="btn btn-success">Success</button>
Contextual button for informational alert messages
<button type="button" class="btn btn-info">Info</button>
Indicates caution should be taken with this action
<button type="button" class="btn btn-warning">Warning</button>
Indicates a dangerous or potentially negative action
<button type="button" class="btn btn-danger">Danger</button>
Large button
Default button
Primary button
Success button
Info button
Warning button
Danger button
How to use
<button type="button" class="btn btn-default btn-lg">Default button</button>
<button type="button" class="btn btn-primary btn-lg">Primary button</button>
<button type="button" class="btn btn-primary btn-lg btn-success">Success button</button>
<button type="button" class="btn btn-primary btn-lg btn-info">Info button</button>
<button type="button" class="btn btn-primary btn-lg btn-warning">Warning button</button>
<button type="button" class="btn btn-primary btn-lg btn-danger">Danger button</button>
Button
Default button
Primary button
Success button
Info button
Warning button
Danger button
How to use
<button type="button" class="btn btn-default">Default button</button>
<button type="button" class="btn btn-primary">Primary button</button>
<button type="button" class="btn btn-primary btn-success">Success button</button>
<button type="button" class="btn btn-primary btn-info">Info button</button>
<button type="button" class="btn btn-primary btn-warning">Warning button</button>
<button type="button" class="btn btn-primary btn-danger">Danger button</button>
Small button
Default button
Primary button
Success button
Info button
Warning button
Danger button
How to use
<button type="button" class="btn btn-default btn-sm">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Primary button</button>
<button type="button" class="btn btn-primary btn-sm btn-success">Success button</button>
<button type="button" class="btn btn-primary btn-sm btn-info">Info button</button>
<button type="button" class="btn btn-primary btn-sm btn-warning">Warning button</button>
<button type="button" class="btn btn-primary btn-sm btn-danger">Danger button</button>
Mini button
Default button
Primary button
Success button
Info button
Warning button
Danger button
How to use
<button type="button" class="btn btn-default btn-xs">Default button</button>
<button type="button" class="btn btn-primary btn-xs">Primary button</button>
<button type="button" class="btn btn-primary btn-xs btn-succes">Success button</button>
<button type="button" class="btn btn-primary btn-xs btn-info">Info button</button>
<button type="button" class="btn btn-primary btn-xs btn-warning">Warning button</button>
<button type="button" class="btn btn-primary btn-xs btn-danger">Danger button</button>
Nested button groups
1
2
Dropdown
Dropdown link
Dropdown link
How to use
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li>>a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
Single button dropdowns
Action
Action
Another action
Something else here
Separated link
Action
Action
Another action
Something else here
Separated link
Danger
Action
Another action
Something else here
Separated link
Warning
Action
Another action
Something else here
Separated link
Success
Action
Another action
Something else here
Separated link
How to use
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<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>
Split button dropdowns
Action
Action
Another action
Something else here
Separated link
Action
Action
Another action
Something else here
Separated link
Danger
Action
Another action
Something else here
Separated link
Warning
Action
Another action
Something else here
Separated link
Success
Action
Another action
Something else here
Separated link
How to use
<div class="btn-group">
<button type="button" class="btn btn-default">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<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>
Dropup buttons
Dropup
Action
Another action
Something else here
Separated link
Right dropup
Action
Another action
Something else here
Separated link
How to use
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<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 instead of text
How to use
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
</span>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
</div>
Buttons with dropdowns
Action
Action
Another action
Something else here
Separated link
Action
Action
Another action
Something else here
Separated link
How to use
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<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>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<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>
</div>
</div>
06