Bootstrap5 Buttons

Bootstrap 5 provides various styles of buttons.

Examples

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

Button classes can be used on <a>, <button>, or <input> elements:

Examples

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
<input type="reset" class="btn btn-info" value="Reset Button">

Button Outline

Bootstrap 5 also allows setting button outlines, adding a highlight effect when the mouse moves over the button:

Examples

<button type="button" class="btn btn-outline-primary">Primary Button</button>
<button type="button" class="btn btn-outline-secondary">Secondary Button</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>

Different Size Buttons

Bootstrap 5 allows setting button sizes, using the .btn-lg class for large buttons and the .btn-sm class for small buttons:

Examples

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

Block Level Buttons

By adding the .btn-block class, you can set block-level buttons, and the .d-grid class is set on the parent element:

Examples

<div class="d-grid">
    <button type="button" class="btn btn-primary btn-block">Button 1</button>
</div>

If you have multiple block-level buttons, you can use the .gap-* class to set the spacing:

Examples

<div class="d-grid gap-3"> <button type="button" class="btn btn-primary btn-block">Button with 100% Width</button> <button type="button" class="btn btn-primary btn-block">Button with 100% Width</button> <button type="button" class="btn btn-primary btn-block">Button with 100% Width</button> </div>

---

## Active and Disabled Buttons

Buttons can be set to active or disabled states.

The `.active` class makes a button appear pressed, and the `disabled` attribute makes a button unclickable. Note that the `<a>` element does not support the disabled attribute, so you must add the `.disabled` class to make the link unclickable.

## Example

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

---

## Loading Buttons

We can also set a button to display a loading state.

## Example

<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> Loading.. </button>

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

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