Buttons
.btn is the base button class — it works on <button>,
<a>, and <input> alike. Combine it with one of the eight theme
color names from Colors & Color System to pick a variant, then layer
on sizing, outline style, full-width, or disabled state as needed.
1. Solid Color Variants: .btn-{color}
<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 Variants: .btn-outline-{color}
Swap btn-{color} for btn-outline-{color} for a bordered button with a
transparent background that fills in on hover.
<button type="button" class="btn btn-outline-primary">Outline Primary</button>
<button type="button" class="btn btn-outline-danger">Outline Danger</button>
<button type="button" class="btn btn-outline-success">Outline Success</button>3. Sizing: .btn-lg and .btn-sm
<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>4. Full-Width Buttons: .btn-block
.btn-block stretches a button to fill the full width of its parent and stacks it as a
block element — the standard way to make a form's submit button span the whole form width.
<button type="button" class="btn btn-primary btn-block">Full-width button</button>.btn-block
is a real, working class — but Bootstrap 5 dropped it in favor of wrapping the button in a
.d-grid container instead. If you're maintaining a Bootstrap 4 project, keep using
.btn-block directly; don't reach for .d-grid, which doesn't do anything
useful here in Bootstrap 4.5. Disabled State
Add the disabled boolean attribute on a real <button> to make it
inert and visibly faded. Since an <a> tag ignores the disabled
attribute, use the .disabled class on links instead.
<button type="button" class="btn btn-primary" disabled>Disabled button</button>
<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true">Disabled link</a>6. Worked Example: TrailMap "Submit Trail" Button Set
TrailMap's trail submission form uses a full-width primary submit button and a plain-text-styled cancel link, side by side underneath the form fields.
<div class="form-group">
<button type="submit" class="btn btn-success btn-block btn-lg">Submit Trail</button>
<button type="button" class="btn btn-outline-secondary btn-block">Save as Draft</button>
</div>