Default

Light

Dark

Base

Button tags

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

Link Button

Options

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

Default Light Dark Base Primary Success Info Warning Danger Link

Sizes

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

Large button Large button
Default button Default button
Small button Small button
Extra small button Extra small button

Block Level

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

Block level button Block level button

Basic example

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

Basic example

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

Sizing

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including when nesting multiple groups.

Nesting

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

Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

Justified button groups

Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.

With <a> elements

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

Single button dropdowns

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

Single button dropdowns

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

Sizing

Button dropdowns work with buttons of all sizes.

Dropup variation

Trigger dropdown menus above elements by adding .dropup to the parent.