Button options

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

Rounded buttons

Add css class .btn-round


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

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.


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


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


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.