Bootstrap Button

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

In Bootstrap, a button can be easily created by using the predefined button classes. Here’s a simple example of a Bootstrap button:

Bootstrap offers multiple button styles that you can apply by changing the class

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Button Outline

Bootstrap 5 also provides eight outline/bordered buttons.

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

Example:
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>

Button Sizes

Use the .btn-lg class for large buttons or .btn-sm class for small buttons

Example:
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

Block Level Buttons

To create a block level button that spans the entire width of the parent element, use the .d-grid "helper" class on the parent element:

Example:
<div class="d-grid"> <button type="button" class="btn btn-primary btn-block">Full-Width Button</button> </div>

Active/Disabled Buttons

A button can be set to an active (appear pressed) or a disabled (unclickable) state:

The class .active makes a button appear pressed, and the disabled attribute makes a button unclickable. Note that elements do not support the disabled attribute and must therefore use the .disabled class to make it visually appear disabled.

Example:
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>

Spinner Buttons

<button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> </button>

<button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> Spinner Button.... </button>

<button class="btn btn-primary" disabled> <span class="spinner-border spinner-border-sm"></span> Spinner Button... </button>

<button class="btn btn-primary" disabled> <span class="spinner-grow spinner-grow-sm"></span> Spinner Button... </button>