Tutorials References Menu

Bootstrap CSS Buttons Reference


Button Colors


Button Sizes


Active/Disabled Buttons


Block-level Button


Button Groups


Button Classes

The classes below can be used to style any <a>, <button>, or <input> element:

Class Description Example
.btn Adds basic styling to any button Try it
.btn-default Indicates a default/standard button Try it
.btn-primary Provides extra visual weight and identifies the primary action in a set of buttons Try it
.btn-success Indicates a successful or positive action Try it
.btn-info Contextual button for informational alert messages Try it
.btn-warning Indicates caution should be taken with this action Try it
.btn-danger Indicates a dangerous or potentially negative action Try it
.btn-link Makes a button look like a link (will still have button behavior) Try it
.btn-lg Makes a large button Try it
.btn-sm Makes a small button Try it
.btn-xs Makes an extra small button Try it
.btn-block Makes a block-level button (spans the full width of the parent element) Try it
.active Makes the button appear pressed Try it
.disabled Makes the button disabled Try it
.navbar-btn Vertically aligns a button inside a navbar Try it

Button Group Classes

The classes below can be used to style any <a>, <button>, or <input> element:

Class Description Example
.btn-group Groups buttons together on a single line Try it
.btn-group-justified Makes a group of buttons span the entire width of the screen Try it
.btn-group-lg Large button group (makes all buttons in a button group larger - increased font-size and padding) Try it
.btn-group-sm Small button group (makes all buttons in a button group smaller) Try it
.btn-group-xs Extra small button group (makes all buttons in a button group extra small) Try it
.btn-group-vertical Makes a button group appear vertically stacked Try it