Bootstrap includes several predefined button styles, each serving its own semantic purpose. Whether you are creating a "Submit" button for a form or a "Cancel" button for a modal, Bootstrap handles the background colors, borders, and hover effects automatically.
To style a button, you always start with the base .btn class. You then add a contextual color class (e.g., .btn-primary) to give it a specific meaning.
.btn classes are designed to be used with the <button> element. However, they can also be safely applied to <a> or <input> elements!
<!-- Notice both classes are required: 'btn' and 'btn-color' -->
<button type="button" class="btn btn-primary">Primary Label</button>
<!-- Applying it to an anchor text link! -->
<a href="#" class="btn btn-success">Navigate Home</a>If you don't want a heavy, solid background color, you can use Outline Buttons. These buttons remove all background colors but retain the border and text color. When users hover their mouse over them, the button fills vividly with its background color.
You achieve this by replacing .btn-color with .btn-outline-color.
<button type="button" class="btn btn-outline-primary">Outline Button</button>Depending on the layout density, you may need a massive click-target (like a hero banner start button) or a tiny button (inside a packed data table).
Add .btn-lg or .btn-sm respectively for additional sizing.
<button type="button" class="btn btn-primary btn-lg">Large Banner Button</button>
<button type="button" class="btn btn-primary btn-sm">Small Table Edit Button</button>To make buttons look unclickable, add the disabled boolean attribute directly into your HTML <button> tag. It will become semi-transparent and disable hover effects instantly.
<!-- Notice the 'disabled' attribute at the end of the tag -->
<button type="button" class="btn btn-danger" disabled>Delete Account</button>Sometimes you need a massive button that stretches 100% horizontally across its container (very common on mobile device menus or login form submit buttons).
Heads up! Previously, Bootstrap had a .btn-block class. But in modern Bootstrap 5, we achieve this by wrapping the buttons in a .d-grid flexbox utility container!
<!-- Adding .d-grid forces both buttons to scale 100% wide -->
<!-- We add gap-2 to provide spacing between them -->
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Login Securely</button>
<button class="btn btn-secondary" type="button">Forgot Password</button>
</div>