Use any of the available button classes to quickly create a styled button.
Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.
.btn-lg
.btn-sm
.btn-xs
Large button Large button
Default button Default button Default button
Small button Small button Small button
Extra small button Extra small button
Extra small button Extra small button Extra small button
Create block level buttons—those that span the full width of a parent— by adding .btn-block.
.btn-block
Block level button Block level button Block level button
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
Add the disabled attribute to <button> buttons.
disabled
<button>
Use the button classes on an <a>, <button>, or <input> element.
<a>
<input>
Wrap a series of buttons with .btn in .btn-group.
.btn
.btn-group
Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.
<div class="btn-group">
<div class="btn-toolbar">
Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.
Turn a button into a dropdown toggle with some basic markup changes.
Similarly, create split button dropdowns with the same markup changes, only with a separate button.
Button dropdowns work with buttons of all sizes.
Instead of applying button sizing classes to every button in a group, just add .btn-group-* to the .btn-group.
.btn-group-*
Just wrap a series of .btns in .btn-group.btn-group-justified.
.btn-group.btn-group-justified
Cloud View Update Upload 89
