Bootstrap 5 Buttons
Bootstrap 5 provides buttons with different styles.
Example
<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>
Try it Yourself »
Button classes can be used on<a>, <button>, or<input>elements:
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 Button">
<input type="submit" class="btn btn-info" value="Submit Button">
<input type="reset" class="btn btn-info" value="Reset Button">
Try it Yourself »
Button Outline
Bootstrap 5 also allows you to set button outlines, adding a highlight effect when the mouse moves over the button.
Example
<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>
Try it Yourself »
Different Button Sizes
Bootstrap 5 can set the size of buttons; use.btn-lgclass to set large buttons, use.btn-smclass to set small buttons:
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>
Try it Yourself »
Block Level Buttons
By adding.btn-blockclass, you can set block-level buttons,.d-gridclass is placed on the parent element:
Example
<div class="d-grid">
<button type="button" class="btn btn-primary btn-block">Button 1</button>
</div>
Try it Yourself »
If you have multiple block-level buttons, you can use.gap-*class to set them:
Example
<div class="d-grid gap-3">
<button type="button" class="btn btn-primary btn-block">100% Width Button</button>
<button type="button" class="btn btn-primary btn-block">100% Width Button</button>
<button type="button" class="btn btn-primary btn-block">100% Width Button</button>
</div>
Try it Yourself »
Active and Disabled Buttons
Buttons can be set to an active state or a disabled (not clickable) state.
.activeclass can set a button as active,disabledattribute can set a button as not clickable. Note that the <a> element does not support the disabled attribute; you can add the.disabledclass to disable link clicks.
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>
Try it Yourself »
Loading Buttons
We can also set a button that is loading.
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>
Try it Yourself »
Other Extensions