Buttons
Default button styling is applied automatically to form submission buttons and also to standards links with class btn. Also, for best compatibility use btn-default class when possible to get the default button color applied.
Link
Transparent Buttons
To give a button a transparent background, with just a wrapping border, add class btn-trans.
Link
Button Sizes
Button sizes can be applied by adding classes btn-xs, btn-sm, btn-lg, btn-xl, btn-xxl and btn-xxl.
| Example | Color | CSS Class |
|---|---|---|
| Click Here | X-Small | btn btn-default btn-xs |
| Click Here | Small | btn btn-default btn-sm |
| Click Here | Default | btn btn-default |
| Click Here | Large | btn btn-default btn-lg |
| Click Here | X-Large | btn btn-default btn-xl |
| Click Here | XX-Large | btn btn-default btn-xxl |
| Click Here | XXX-Large | btn btn-default btn-xxxl |
Button Colors
Branding
| Example | Color | CSS Class |
|---|---|---|
| Click Here | Primary | btn btn-primary |
| Click Here | Primary | btn btn-primary btn-trans |
| Click Here | Secondary | btn btn-secondary |
| Click Here | Secondary | btn btn-secondary btn-trans |
Contextual
| Example | Color | CSS Class |
|---|---|---|
| Click Here | Success | btn btn-success |
| Click Here | Success | btn btn-success btn-trans |
| Click Here | Information | btn btn-info |
| Click Here | Information | btn btn-info btn-trans |
| Click Here | Warning | btn btn-warning |
| Click Here | Warning | btn btn-warning btn-trans |
| Click Here | Danger | btn btn-danger |
| Click Here | Danger | btn btn-danger btn-trans |
Color Library
| Example | Color | CSS Class |
|---|---|---|
| Click Here | Asphalt | btn btn-asphalt |
| Click Here | Asphalt | btn btn-asphalt btn-trans |
| Click Here | Black | btn btn-black |
| Click Here | Black | btn btn-black btn-trans |
| Click Here | Blue | btn btn-blue |
| Click Here | Blue | btn btn-blue btn-trans |
| Click Here | Brown | btn btn-brown |
| Click Here | Brown | btn btn-brown btn-trans |
| Click Here | Concrete | btn btn-concrete |
| Click Here | Concrete | btn btn-concrete btn-trans |
| Click Here | Cream | btn btn-cream |
| Click Here | Cream | btn btn-cream btn-trans |
| Click Here | Crimson | btn btn-crimson |
| Click Here | Crimson | btn btn-crimson btn-trans |
| Click Here | Dark Blue | btn btn-dark-blue |
| Click Here | Dark Blue | btn btn-dark-blue btn-trans |
| Click Here | Dark Brown | btn btn-dark-brown |
| Click Here | Dark Brown | btn btn-dark-brown btn-trans |
| Click Here | Dark Green | btn btn-dark-green |
| Click Here | Dark Green | btn btn-dark-green btn-trans |
| Click Here | Dark Purple | btn btn-dark-purple |
| Click Here | Dark Purple | btn btn-dark-purple btn-trans |
| Click Here | Forest | btn btn-forest |
| Click Here | Forest | btn btn-forest btn-trans |
| Click Here | Green | btn btn-green |
| Click Here | Green | btn btn-green btn-trans |
| Click Here | Jungle | btn btn-jungle |
| Click Here | Jungle | btn btn-jungle btn-trans |
| Click Here | Light | btn btn-light |
| Click Here | Light | btn btn-light btn-trans |
| Click Here | Mauve | btn btn-mauve |
| Click Here | Mauve | btn btn-mauve btn-trans |
| Click Here | Orange | btn btn-orange |
| Click Here | Orange | btn btn-orange btn-trans |
| Click Here | Peach | btn btn-peach |
| Click Here | Peach | btn btn-peach btn-trans |
| Click Here | Pearl | btn btn-pearl |
| Click Here | Pearl | btn btn-pearl btn-trans |
| Click Here | Pink | btn btn-pink |
| Click Here | Pink | btn btn-pink btn-trans |
| Click Here | Pomegranate | btn btn-pomegranate |
| Click Here | Pomegranate | btn btn-pomegranate btn-trans |
| Click Here | Purple | btn btn-purple |
| Click Here | Purple | btn btn-purple btn-trans |
| Click Here | Red | btn btn-red |
| Click Here | Red | btn btn-red btn-trans |
| Click Here | Royal | btn btn-royal |
| Click Here | Royal | btn btn-royal btn-trans |
| Click Here | Slate Grey | btn btn-slate-grey |
| Click Here | Slate Grey | btn btn-slate-grey btn-trans |
| Click Here | Silver | btn btn-silver |
| Click Here | Silver | btn btn-silver btn-trans |
| Click Here | Steel Blue | btn btn-steel-blue |
| Click Here | Steel Blue | btn btn-steel-blue btn-trans |
| Click Here | Teal | btn btn-teal |
| Click Here | Teal | btn btn-teal btn-trans |
| Click Here | Turquoise | btn btn-turquoise |
| Click Here | Turquoise | btn btn-turquoise btn-trans |
| Click Here | Yellow | btn btn-yellow |
| Click Here | Yellow | btn btn-yellow btn-trans |
| Click Here | Wheat | btn btn-wheat |
| Click Here | Wheat | btn btn-wheat btn-trans |
| Click Here | White | btn btn-white |
| Click Here | White | btn btn-white btn-trans |
Block-Level Buttons
Create block-level buttons — those that span the full width of a parent — by adding class btn-block.
Click Here
Buttons With Icons
When pairing a Font Awesome icon with a button, add classes before or after to the icons to aid in spacing them nicely within the buttons.
Follow Me on Twitter
Read More
Button Groups
Button groups require the class btn-group but can be structured as an element with buttons within.
Standard Button Group
Tight Button Group
To eliminate the spacing between buttons of a group, add the class btn-group-tight.
Button Group Alignment
By default, buttons will be aligned to the start of the .btn-group container, but you can can add classes btn-group-align-center or btn-group-align-end to change that.
Justified Button Group
For a justified button group or a row of buttons with equal widths, add class btn-group-justified, but the group must be structured as an unordered list.
You can also use class btn-group-tight in this scenario, as well. In the following example button color classes have been added to show the separation of buttons from each other.
A justified button group can also be very useful when you just want a couple of buttons to match in width. In the example below we've styled the .btn-group element to have max-width: 400px and auto left and right margin.
Note: Because a justified button group's buttons will automatically expand to have equal width and fill the container, it generally won't make sense to mix .btn-group-justified with alignment classes.
Button Group Sizing
Include buttons from any of the sizes above in your button groups.
Pagination
To add a little extra styling for a button group meant to serve as pagination, add the class pagination to it.