Buttons

Button Styles

Includes multiple button designs

Example

Output :

You can apply button classes to <a>, <button>, or <input> tags.

Output :

Button Outline

There are eight outline-style (bordered) buttons available

Move the mouse over them to see an additional "hover" effect:

Output :

Button Sizes

Apply the .btn-lg class to make buttons larger, or .btn-sm for smaller buttons

Output :

Block Level Buttons

To make a full-width block button, add the .d-grid helper class to the parent element.

Output :

Active/Disabled Buttons

A button can be made active (looks pressed) or disabled (can’t be clicked).

Disabled Link

The .active class gives a button a pressed look, while the disabled attribute makes it unclickable. For <a> elements, since they don’t support the disabled attribute, use the .disabled class to make them look disabled

Output :

Spinner Buttons

Spinners can also be added to buttons — you’ll learn more about them in our upcoming section.