Basic

To create this element, with default color styling, you need to add the .btn and .btn-defaultCSS class to any <a>, <input> or <button> element.

Disabled States

You can disable a button element by adding either the .disabled CSS helper class or the disabled parameter.

Active States

To make a button element active you need to add the .active CSS helper class.

Sizes

To change the button elements sizes you need to add one of the following CSS helper classes .btn-xs, .btn-sm, .btn-lg.

Background Colors

You can use the color helper CSS classes to add different background to the button element.

Rounded buttons

To change the button elements to rounded you have to add the .btn-rounded CSS helper class.

Full Width

To change the button elements to full width (block level) you have to add the .btn-block CSS helper class.

Button Groups

To create button groups you need to wrap buttons inside a <div> with .btn-group CSS helper class.

Sizing

To change the button groups sizes you need to add one of the following CSS helper classes to the .label-group, .label-group-xs, .label-group-sm, .label-group-lg.

Toolbars

Button toolbars consist of multiple .btn-group elements wrapped inside a <div> with .btn-toolbar CSS helper class.

Nesting Horizontal

By placing a .btn-group within another .btn-group you can create dropdown menus mixed with a series of buttons.

Nesting Vertical

To create vertically nestes button groups you need to wrap the .btn-group elements within a wrapper with .btn-group-vertical CSS helper class.

Justified Groups

To make a group of buttons stretch at equal sizes to span the entire width of its parent, you need to add .label-group-justified to the .label-group element. Also works with button dropdowns within the button group.

Button Dropdowns

Use any button to trigger a dropdown menu by placing it within a .label-group and providing the proper menu markup.

Split Button Dropdowns

Similarly, create split button dropdowns with the same markup changes, only with a separate button.

Sizing

To change the button dropdowns sizes you need to add one of the following CSS helper classes .label-xs, .label-sm, .label-lg.

Button Dropups

Button dropups are just like regular dropdowns, only they open at the top rather than the bottom. To create a button dropup you need to add the .dropup CSS helper class to the button parent container.