Buttons

Default Buttons

Use any of the available button classes to quickly create a styled button.

Buttons Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

block level buttons

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

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
Disabled Buttons

Add the disabled attribute to <button> buttons.

Button tags

Use the button classes on an <a>, <button>, or <input> element.

Link
Buttons Groups

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

Button toolbar

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

Nesting

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

Button dropdowns

Turn a button into a dropdown toggle with some basic markup changes.

Split button dropdowns

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

Sizing button dropdowns

Button dropdowns work with buttons of all sizes.

Buttons Groups Sizing

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to the .btn-group.

Justified Button groups

Just wrap a series of .btns in .btn-group.btn-group-justified.

Left Middle Right
Buttons With Icon

Star Rating Example