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

Secondary Primary Success Info Warning Danger Disabled Link

Outline buttons

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.

Secondary Primary Success Info Warning Danger Disabled Link

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

Checkbox buttons

Checkbox buttons (Reactive Forms)

Radio buttons

Radio buttons (Reactive Forms)

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.

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

Block level button Block level button Block level button

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