Buttons page header description goes here...


Classes

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. Please read the official Bootstrap documentation for the full list of options.



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.



Sizes

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

Large Button
Small Button

States

Buttons will appear pressed when active or you can still force the same active appearance by adding .active class. Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

Active State
Primary link Link
Disabled State

Button group

Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.

Group size

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

Vertical Group

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

Button toolbar

Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

Theme Color

Dark Mode
Adjust the appearance to reduce glare and give your eyes a break.