Buttons

This section documents Bootstrap 5.x as implemented by the official Bootstrap project. No specific patch version is pinned. Unlike the other reference sections on this site, no single reference book underpins it: the content was generated with the assistance of AI from general knowledge of Bootstrap, and should be verified against the current official documentation at getbootstrap.com/docs before relying on it in production.

This section’s bibliography lists the reference material consulted while preparing these pages.

Bootstrap’s button styling applies to any of three different elements — <button>, <a>, and <input type="button|submit|reset"> — so the same .btn classes render consistently regardless of which one is semantically correct for a given action. Choosing the right element still matters: a <button> for an in-page action, an <a> for navigation to a new URL, and <input> only inside a form being submitted the old-fashioned way.

Base class and color variants

.btn alone provides the base padding, border, and transition; a .btn-* modifier supplies the actual color, drawn from the same semantic palette used throughout Bootstrap:

<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>
<button type="button" class="btn btn-link">Link</button>

.btn-link renders with no background or border at all, styled to look like a plain hyperlink while keeping the same padding/hover/focus behavior as every other button — useful for a low-emphasis action that should not visually compete with the primary action nearby.

An <a> styled as a button needs role="button" if its href doesn’t actually navigate anywhere meaningful (for example, href="#" paired with a JavaScript click handler), so assistive technology announces it as a button rather than a link:

<a href="#" class="btn btn-primary" role="button">Link styled as a button</a>

Outline buttons

Every solid color has a matching .btn-outline-* variant: transparent background, colored border and text, filling in with the solid color only on hover/focus:

<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-dark">Outline Dark</button>

Outline buttons are a common choice for a secondary action sitting next to a solid primary one — "Cancel" next to "Save", for instance — since the pair reads as one primary and one lower-emphasis action without needing a third, less standard color.

Sizes

.btn-lg and .btn-sm scale a button up or down; the unmodified .btn is the default, medium size:

<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>

Pairing .btn-lg/.btn-sm with .w-100 (a width utility) produces a full-width button, common on mobile forms and single-action cards:

<button type="button" class="btn btn-primary btn-lg w-100">Continue</button>

States

Disabled

A <button> uses the native disabled attribute, which both blocks interaction and is announced correctly by assistive technology. An <a> has no native disabled attribute, so the same visual effect there requires the .disabled class plus aria-disabled="true" — exactly the same pattern used for a disabled pagination link (see Navigation Components):

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

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

tabindex="-1" on the disabled link additionally removes it from the keyboard tab order — without it, a keyboard user could still focus a link that visually and functionally does nothing.

Active

.active forces a button to render in its pressed/active visual state regardless of actual interaction — typically used to mark the currently selected button in a group of toggle-like buttons (see below), rather than applied to an ordinary standalone button:

<button type="button" class="btn btn-primary active" aria-pressed="true">Active</button>

aria-pressed="true" communicates the same toggled state to assistive technology, since .active by itself is purely a visual class with no accessibility semantics of its own.

Toggle buttons (checkbox/radio behavior)

A group of buttons can behave like a checkbox or radio group — one or more pressed at a time — by pairing visually-hidden real <input> elements with <label class="btn"> elements, so the underlying semantics stay native even though the rendering is button-shaped:

<input type="checkbox" class="btn-check" id="option-1" autocomplete="off">
<label class="btn btn-outline-primary" for="option-1">Checkbox toggle</label>

<input type="radio" class="btn-check" name="options" id="option-a" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="option-a">Radio A</label>
<input type="radio" class="btn-check" name="options" id="option-b" autocomplete="off">
<label class="btn btn-outline-primary" for="option-b">Radio B</label>

.btn-check visually hides the native input (rather than display: none, which would remove it from the tab order) while keeping it fully operable by keyboard and screen reader — the <label> only supplies the visual button appearance.

Grouping buttons

.btn-group

.btn-group visually joins a row of related buttons — shared borders, no gap between them — and wraps them in a role="group" with a descriptive aria-label so assistive technology announces them as one coherent control rather than a list of unrelated buttons:

<div class="btn-group" role="group" aria-label="Text alignment">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Center</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

.btn-group-lg/.btn-group-sm on the wrapper size every button inside it at once, and .btn-group-vertical stacks the group vertically instead of horizontally. Groups can also nest a dropdown (see Interactive Components) as one of their members:

<div class="btn-group">
  <button type="button" class="btn btn-secondary">Save</button>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
            data-bs-toggle="dropdown" aria-expanded="false">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Save and continue</a></li>
      <li><a class="dropdown-item" href="#">Save as draft</a></li>
    </ul>
  </div>
</div>

.btn-toolbar

.btn-toolbar combines several separate .btn-group elements into one row — a toolbar of distinct, unrelated control clusters, each still announced individually by its own role="group":

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
  </div>
  <div class="btn-group me-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">3</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">4</button>
  </div>
</div>

.me-2 between groups is an ordinary margin utility — .btn-toolbar handles the flex layout of the groups themselves, but spacing between them is applied the same way as anywhere else on the page.

See the official Buttons docs and the official Button Group docs for the complete option reference.