7.11. Bootstrap5 button

Bootstrap 5 provides different styles of buttons.

7.11.1. Example ¶

<button type="button" class="btn">Basic buttons</button>
<button type="button" class="btn btn-primary">Main buttons</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">information</button>
<button type="button" class="btn btn-warning">warn</button>
<button type="button" class="btn btn-danger">dangerous</button>
<button type="button" class="btn btn-dark">black</button>
<button type="button" class="btn btn-light">light colour</button>
<button type="button" class="btn btn-link">link</button>

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

7.11.2. Example ¶

<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 box button">
<input type="submit" class="btn btn-info" value="Submit button">
<input type="reset" class="btn btn-info" value="Reset button">

Button to set the border ¶

Bootstrap 5 can also set the button multi-border, move the mouse over the button to add prominence to the effect:

7.11.3. Example ¶

<button type="button" class="btn btn-outline-primary">Main buttons</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">information</button>
<button type="button" class="btn btn-outline-warning">warn</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">black</button>
<button type="button" class="btn btn-outline-light text-dark">light colour</button>

Buttons of different sizes ¶

Bootstrap 5 can set the size of the button, using the .btn-lg class to set large buttons, using the .btn-sm class settings mini button:

7.11.4. Example ¶

<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 button ¶

By adding .btn-block class can set block-level buttons .d-grid class is set in the parent element:

7.11.5. Example ¶

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

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

7.11.6. Example ¶

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

Activate and disable button ¶

The button can be set to activate or disable clicks.

.active class can set the button to be available disabled property to set that the button is unclickable. Be careful <a> element does not support disabled property, you can add the .disabled class to prohibit the click of a link.

7.11.7. Example ¶

<button type="button" class="btn btn-primary active">After clicking the button</button>
<button type="button" class="btn btn-primary" disabled>Button prohibited from clicking</button>
<a href="#" class="btn btn-primary disabled">Prohibited links to click on</a>

Load button ¶

We can also set a button that is being loaded.

7.11.8. 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>