Button Styles

Basic Primary Secondary Success Info Warning Danger Dark Light Link

Button Elements

Link Button Button

Button Outline

Primary Secondary Success Info Warning Danger Dark Light

Button Sizes

Large Default Small

Block Level Buttons

Button 1 Button 2

Large Block Level Buttons

Button 1 Button 2

Small Block Level Buttons

Button 1 Button 2

Button States

Primary Button Active Primary Disabled Primary Disabled Link

Button Group

The .btn-group class creates a button group:

Button Groups Sizes

Add class .btn-group-* to size all buttons in a button group.

Large Buttons:

Default Buttons:

Small Buttons:

Vertical Button Group

Use the .btn-group-vertical class to create a vertical button group:

Nesting Button Groups

Nest button groups to create dropdown menus:

Split Buttons

Vertical Button Group with Dropdown

Badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Contextual Badges

Primary Secondary Success Danger Warning Info Light Dark

Pill Badges

Primary Secondary Success Danger Warning Info Light Dark

Badge inside a Button

Messages 4 Notifications 7

Basic Progress Bar

To create a default progress bar, add a .progress class to a container element and add the progress-bar class to its child element. Use the CSS width property to set the width of the progress bar:

Progress Bar Height

The height of the progress bar is 1rem (16px) by default. Use the CSS height property to change the height:

Progress Bar With Label

Colored Progress Bars

Use any of the contextual color classes to change the color of the progress bar:

Striped Progress Bars

The .progress-bar-striped class adds stripes to the progress bars:

Animated Progress Bar

Add the .progress-bar-animated class to animate the progress bar:

Multiple Progress Bars

Create a stacked progress bar by placing multiple bars into the same div with class="progress":

Dropdowns

The .dropdown class is used to indicate a dropdown menu.

Use the .dropdown-menu class to actually build the dropdown menu.

To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".

Dropdowns

The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal line:

Dropdowns

The .dropdown-header class is used to add headers inside the dropdown menu:

Dropdowns

The .active class adds a blue background color to the active link.

The .disabled class disables a dropdown item (grey text color and a no-parking-sign on hover).

Dropdowns

Add the .dropdown-menu-right class to .dropdown-menu to right-align the dropdown menu:

Dropdowns

The .dropup class makes the dropdown menu expand upwards instead of downwards:

Dropdown Split Buttons