Use any of the available button classes to quickly create a styled button .btn
. Use the button classes on an <a>
, <button>
, or <input>
element.
Default context colors
Other colors
Size .btn-lg .btn-sm .btn-xs
Badge .btn > .badge
Icon .btn > .fa
Alternative use with icons
Active state .active
Disabled state disabled="disabled"
No fill .btn-nofill
On states
Buttons with icon .btn-icon
Align .btn-icon.btn-icon-left
Button Call .btn-call
This is a stand alone button (designed for the dahsboard), not required .btn
.
Block level .btn-block
Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with Bootstrap buttons plugin.
Tooltips & popovers in button groups require special setting
When using tooltips or popovers on elements within a .btn-group
, you'll have to specify the option container: 'body'
to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).
Basic
Nesting
Toolbar
Single button dropdowns
Plugin dependency
Button dropdowns require the dropdown plugin to be included in your version of Bootstrap.
Split button dropdowns and dropup variation
Simple pagination
Fancy larger or smaller pagination? Add .pagination-lg
or .pagination-sm
for additional sizes.
Pager
Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
Aligned links
Alternatively, you can align each link to the sides:
Optional disabled state
Pager links also use the general .disabled
utility class from the pagination.