twitter-bootstrap Buttons Button Classes
Example
Bootstrap provides multiple classes for styling buttons and making them stand out.
Bootstrap buttons can be created by adding the .btn class to an element.
| Bootstrap Class | Role (color) |
|---|---|
.btn-default | Standard button (white) |
.btn-primary | Provides extra visual weight and identifies the primary action (blue) |
.btn-success | Used to indicate a successful action (green) |
.btn-info | Contextual button for providing information (light blue) |
.btn-warning | Indicates caution should be applied by the user (yellow) |
.btn-danger | Indicates a dangerous or negative action (red) |
.btn-link | Make you button look like an anchor tag. |
Button Sizes
You can also create different sizes of buttons with the .btn-size classes
| Bootstrap Class | Result |
|---|---|
.btn-lg | Creates a larger sized button |
.btn-sm | Creates a smaller sized button |
.btn-xs | Creates an extra-small button |
.btn-block | Buttons become block-level elements and span the full width of their parent |
Make button active
The active class will make a button appear pressed.
<button type="button" class="btn btn-primary active">Active Primary</button>
Disable a button
Adding the disabled class to a button will render the button un-clickable and show a forbidden cursor when hovering over it.
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Render buttons horizontally together
Multiple buttons can be rendered horizontally with the .btn-group class. Simply wrap your buttons inside a container element and give that element the btn-group class.
<div class="btn-group">
<button type="button" class="btn btn-primary">Apples</button>
<button type="button" class="btn btn-primary">Oranges</button>
<button type="button" class="btn btn-primary">Pineapples</button>
</div>
Render buttons vertically
Apply the .btn-group-vertical class to the container element
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apples</button>
<button type="button" class="btn btn-primary">Oranges</button>
<button type="button" class="btn btn-primary">Pineapples</button>
</div>
Make button group take up full width
Buttons wrapped inside a .btn-group element only take up as much width as needed. To make the group span the entire width of the screen, use .btn-group-justified instead.
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apples</a>
<a href="#" class="btn btn-primary">Oranges</a>
<a href="#" class="btn btn-primary">Pineapples</a>
</div>
