Bootstrap5 button
Bootstrap 5 provides different styles of buttons.
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>:
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:
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:
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:
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:
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.
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.
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>