Buttons and Button Groups

Buttons are usually the first component people reach for in Bootstrap, and they show the pattern behind most components: a base class plus a modifier class for variants.

Base classes and color variants

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-outline-primary">Outline</button>

.btn alone gives an element button-like padding, a border radius, and a pointer cursor, but no color — you always pair it with a variant class like .btn-primary. The .btn-outline-* variants swap the solid background for a colored border and text, filling in on hover — a good choice for a secondary action that shouldn't compete visually with a primary one.

Because .btn is just a class, it works on more than <button>:

<a href="/signup" class="btn btn-primary">Sign up</a>
<input type="submit" class="btn btn-success" value="Submit order" />

Keep the underlying element semantically correct, though — use <a> for navigation and <button> for in-page actions, even when both end up styled identically. A screen reader announces them differently, and that distinction matters more than the visual result.

Sizes and states

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

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

A disabled attribute (or aria-disabled="true" on non-form elements like <a>) both dims the button and blocks pointer and keyboard interaction — Bootstrap handles the styling, but you still need the actual HTML attribute for the behavior to work.

Button groups

When several related actions belong together — like formatting controls or a segmented filter — .btn-group visually merges buttons into one connected unit instead of a row of separate, spaced-out buttons:

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

The role="group" and aria-label aren't decorative — they tell assistive technology that these buttons form one cohesive control with a shared purpose, rather than three unrelated buttons that happen to sit next to each other.

Toggle states

Combined with a small amount of JavaScript (or the data-bs-toggle="button" attribute), buttons can track a pressed/active state, useful for things like a "favorite" toggle:

<button
  type="button"
  class="btn btn-outline-danger"
  data-bs-toggle="button"
>
  ♥ Favorite
</button>

data-bs-toggle="button" tells Bootstrap's JavaScript to add an .active class (and aria-pressed="true") each time the button is clicked, without you writing an event listener — the same declarative, data-attribute-driven pattern you'll see again with dropdowns, collapses, and other interactive components later in this course.