Buttons

Bootstrap 5 buttons start from one base class, .btn, and layer on the same theme-color keywords from the colors lesson to get solid or outline variants, plus size and state modifiers. Buttons can be a real <button>, an <a> styled to look like one, or an <input> — the class does the styling regardless of tag.

1. Base Button and Color Variants

.btn alone gives you the shape, padding and hover/focus behavior; add .btn-{color} for a solid fill in one of the eight theme colors.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

2. Outline Buttons: .btn-outline-{color}

Swap .btn-{color} for .btn-outline-{color} for a lower-emphasis version: colored border and text on a transparent background, filling in solid on hover.

<button type="button" class="btn btn-outline-primary">Outline primary</button>
<button type="button" class="btn btn-outline-danger">Outline danger</button>

3. Sizing: .btn-lg / .btn-sm

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default size</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>

4. Full-Width Buttons: .d-grid Replaces .btn-block

Bootstrap 4's .btn-block class was removed entirely in Bootstrap 5. To make a button span the full width of its parent now, wrap it in a .d-grid container instead — the grid display makes its child stretch to fill the row. Add .gap-2 on the wrapper if you 're stacking several full-width buttons.

<!-- Bootstrap 4 (removed in 5): <button class="btn btn-primary btn-block"> -->

<!-- Bootstrap 5 way: -->
<div class="d-grid gap-2">
  <button type="button" class="btn btn-primary">Full-width button</button>
</div>

5. Disabled Buttons

Real <button> elements support the native disabled attribute, which also removes pointer events. Anchor (<a>) buttons have no native disabled state, so they need the .disabled class plus aria-disabled="true" instead.

<button type="button" class="btn btn-primary" disabled>Disabled button</button>

<a href="#" class="btn btn-primary disabled" aria-disabled="true">Disabled link</a>

6. Worked Example: TrailMap "Submit Trail" Buttons

TrailMap's "submit a trail" form ends with a full-width primary submit button on mobile-style narrow layouts, and a secondary outline "Save as draft" option next to it on the review screen.

<!-- Full-width primary submit, using the .d-grid pattern -->
<div class="d-grid gap-2">
  <button type="submit" class="btn btn-success btn-lg">Submit Trail</button>
</div>

<!-- Two buttons side by side on the review screen -->
<button type="button" class="btn btn-outline-secondary">Save as draft</button>
<button type="submit" class="btn btn-success">Submit Trail</button>