Buttons and Button Groups

Buttons are the workhorse of any interface, and Bootstrap gives you a complete system for them: solid and outline variants in every theme color, three sizes, disabled and active states, and grouping tools for toolbars and segmented controls. This lesson covers all of it, plus the accessibility details that many tutorials skip.

Basic Buttons

Add .btn plus a color variant to a button, a or input element:

html

<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-secondary">Cancel</button>
<button type="button" class="btn btn-danger">Delete</button>
<button type="button" class="btn btn-link">Learn more</button>

btn-link renders a button that looks like a link, useful when an action belongs in a sentence. When you style an a element as a button, add role="button" so assistive technology announces it correctly.

Outline Variants

Outline buttons keep the color on the border and text until hovered, giving a lighter visual weight for secondary actions:

html

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

A common hierarchy: one solid primary button per view for the main action, outline buttons for alternatives.

Sizes and Widths

Use btn-lg or btn-sm to scale buttons. For full-width buttons, wrap them in a d-grid container instead of the removed btn-block class:

html

<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-sm">Small</button>
<div class="d-grid gap-2">
  <button class="btn btn-success">Full-width checkout</button>
</div>

States: Disabled and Active

On real button elements, use the disabled attribute, which also blocks clicks and removes the element from tab order. On links styled as buttons, add the disabled class along with aria-disabled="true" and tabindex="-1" since anchors have no disabled attribute. The active class forces the pressed appearance, which button groups use for selected states.

Button Groups

.btn-group fuses adjacent buttons into a single segmented control, collapsing the borders between them:

html

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

Add btn-group-lg or btn-group-sm on the group to size all buttons at once, and use btn-group-vertical for stacked groups. The role="group" and aria-label attributes tell screen readers the buttons belong together.

Toolbars and Checkbox Buttons

Combine several groups inside a .btn-toolbar with gap utilities to build editor-style toolbars. Bootstrap can also render checkboxes and radios as toggle buttons using .btn-check:

html

<input type="checkbox" class="btn-check" id="notify" autocomplete="off">
<label class="btn btn-outline-primary" for="notify">Notifications</label>

The input stays in the form data while the label provides the button visuals, giving you accessible toggles with zero JavaScript.

Key Takeaways

.btn plus btn-{color} or btn-outline-{color} covers every button style.
Size with btn-lg/btn-sm; make full-width buttons with a d-grid wrapper.
Disable real buttons with the attribute; links need class plus ARIA attributes.
.btn-group builds segmented controls; .btn-check turns inputs into toggles.

Next lesson: Navbars and Navigation, where buttons meet responsive menus.