Buttons
Use button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Examples
Here are several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
<!-- Light Backgrounds -->
<div class="p-3">
<div class="d-flex flex-wrap gap-2 mb-2">
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-secondary">Secondary</a>
<a href="#" class="btn btn-dark">Dark</a>
<a href="#" class="btn btn-outline-primary">Outline Primary</a>
<a href="#" class="btn btn-outline-dark">Outline Dark</a>
</div>
<div class="d-flex flex-wrap gap-2">
<a href="#" class="btn btn-link">Text Link Button</a>
<a href="#" class="btn btn-link link-dark">Text Link Button (dark)</a>
</div>
</div>
<!-- Dark Backgrounds -->
<div class="bg-dark mt-2 p-3">
<a href="#" class="btn btn-light">Light</a>
<a href="#" class="btn btn-outline-light">Outline Light</a>
<a href="#" class="btn btn-outline-secondary">Outline Secondary</a>
<a href="#" class="btn btn-link link-secondary">Text Link Button (secondary)</a>
<a href="#" class="btn btn-link link-light">Text Link Button (light)</a>
</div>
Button Sizes
Fancy larger or smaller buttons?
<a href="#" class="btn btn-primary btn-lg">Large Button</a>
<a href="#" class="btn btn-outline-dark btn-lg">Large Button</a>
<a href="#" class="btn btn-primary btn-sm">Small Button</a>
<a href="#" class="btn btn-outline-dark btn-sm">Small Button</a>