Button options

Bootstrap includes six predefined button styles, each serving its own semantic purpose.

Rounded buttons

Add css class .btn-round

Outline

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

Button dropdowns and dropups

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

Sizing

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

Large button   Large button

Default button   Default button

Small button   Small button

Button icons

Custom bootstrap buttons with icons

Block level buttons

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

Groups

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

Toolbar

Combine sets of button groups into button toolbars for more complex components.

Nesting

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

Vertical groups

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