Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Button	class=""	Description
Default	btn	Standard gray button with gradient
Primary	btn btn-primary	Provides extra visual weight and identifies the primary action in a set of buttons
Info	btn btn-info	Used as an alternative to the default styles
Success	btn btn-success	Indicates a successful or positive action
Warning	btn btn-warning	Indicates caution should be taken with this action
Danger	btn btn-danger	Indicates a dangerous or potentially negative action
Inverse	btn btn-inverse	Alternate dark gray button, not tied to a semantic action or use

Flat buttons

Flat Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Button	class=""	Description
Default	btn btn-flat	Standard gray button with gradient
Primary	btn btn-primary btn-flat	Provides extra visual weight and identifies the primary action in a set of buttons
Info	btn btn-info btn-flat	Used as an alternative to the default styles
Success	btn btn-success btn-flat	Indicates a successful or positive action
Warning	btn btn-warning btn-flat	Indicates caution should be taken with this action
Danger	btn btn-danger btn-flat	Indicates a dangerous or potentially negative action
Inverse	btn btn-inverse btn-flat	Alternate dark gray button, not tied to a semantic action or use

Button Sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.

Large button Large button

Default button Default button

Small button Small button

Mini button Mini button

BLock Level

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

Pagination

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

• 1
• 2
• 3
• 4
• Next

Breadcrumbs

A single example shown as it might be displayed across multiple pages.

• Home

• Home /
• Library

• Home /
• Library /
• Data

Button Groups

Wrap a series of buttons with .btn in .btn-group.

Button dropdown menus

Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.