LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 1317 min read

Buttons

Learn Bootstrap's .btn class, contextual color variants, sizes, outline buttons, block buttons, and the disabled state.

Introduction

Buttons are one of the most frequently used UI elements on any site, and Bootstrap makes styling them effortless. With a single `.btn` class plus a contextual color modifier, you get a consistent, accessible button that works on `<button>`, `<a>`, and `<input>` elements alike.

What You Will Learn
  • The base .btn class and why it's required.
  • Contextual color variants like .btn-primary and .btn-danger.
  • Outline buttons, sizes, and full-width buttons.
  • How to properly disable a button or button-styled link.

Basic Button Classes

Every Bootstrap button starts with the base `.btn` class, which resets default browser button styling and applies consistent padding, border-radius, and transitions. On its own, `.btn` produces a plain gray-bordered button — you almost always pair it with a color variant.

<button type="button" class="btn">Plain .btn (rarely used alone)</button>
<button type="button" class="btn btn-primary">Primary</button>
What Renders

Click Run to see what this code prints.

Contextual Button Variants

Bootstrap ships eight contextual variants, each mapped to a theme color. Pick the variant that matches the semantic meaning of the action — for example, .btn-danger for a destructive action like "Delete".

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

Click Run to see what this code prints.

Outline Buttons

For a less visually heavy option, swap `.btn-{variant}` for `.btn-outline-{variant}`. These start as transparent buttons with a colored border and text, then fill in with solid color on hover.

<button type="button" class="btn btn-outline-primary">Outline Primary</button>
<button type="button" class="btn btn-outline-danger">Outline Danger</button>
What Renders

Click Run to see what this code prints.

Button Sizes

Add `.btn-lg` or `.btn-sm` alongside `.btn` and a color variant to scale a button's padding and font size up or down. Leaving the size class off gives you the default medium size.

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

Click Run to see what this code prints.

Block & Full-Width Buttons

Bootstrap 5 removed the old `.btn-block` class. To make a button span the full width of its parent, combine the display utility `.d-grid` on the parent (or `.w-100` directly on the button).

<div class="d-grid">
  <button type="button" class="btn btn-primary">Full-Width Button</button>
</div>
What Renders

Click Run to see what this code prints.

Disabled Buttons

On a real `<button>` element, add the `disabled` boolean attribute to prevent clicks and lower opacity. Since `<a>` elements don't support the `disabled` attribute, add the `.disabled` class and `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" tabindex="-1">Disabled Link</a>
What Renders

Click Run to see what this code prints.

Because `.btn` is just a CSS class, you can apply it to an `<a>` tag to make a link look exactly like a button — very common for "Sign Up" or "Learn More" calls to action that navigate to another page.

<a href="/signup" class="btn btn-success btn-lg">Sign Up Free</a>
What Renders

Click Run to see what this code prints.

Toggle & Active States

Add `.active` to visually mark a button as pressed, and `aria-pressed="true"` for accessibility. Combined with `data-bs-toggle="button"`, Bootstrap's JavaScript will toggle the `.active` class automatically on click.

<button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false">
  Toggle Me
</button>
What Renders

Click Run to see what this code prints.

Common Mistakes

Avoid These Mistakes
  • Forgetting the base .btn class and applying only .btn-primary — the color variant alone does nothing.
  • Using .disabled on a real <button> instead of the disabled attribute (or vice versa on <a> tags).
  • Expecting .btn-block to exist in Bootstrap 5 — use d-grid or w-100 instead.
  • Choosing a color variant that doesn't match the action's meaning (e.g., btn-danger for a harmless "Save" button).

Best Practices

  • Always pair .btn with a contextual variant for meaningful color and contrast.
  • Use btn-danger sparingly, reserved for genuinely destructive actions like delete.
  • Add tabindex="-1" and aria-disabled="true" when disabling link-based buttons.
  • Prefer outline buttons for secondary actions to keep visual hierarchy clear.
  • Use type="button" on buttons that shouldn't submit a form, to avoid accidental submissions.

Frequently Asked Questions

It was removed in favor of the display and sizing utilities — wrap your button in a d-grid container, or add w-100 directly to the button, to make it full width.

Yes, .btn works on <button>, <a>, and <input> elements, and Bootstrap normalizes their appearance to look identical.

Bootstrap adds a visible focus ring for accessibility by design — removing it entirely is discouraged since it helps keyboard users see what's focused.

Make sure you added both the .disabled class (for styling) and aria-disabled="true" plus tabindex="-1" — CSS alone won't stop keyboard focus or screen readers from treating it as active.

Key Takeaways

  • Every button needs the base .btn class plus a contextual variant like .btn-primary.
  • Outline variants (.btn-outline-*) give a lighter-weight visual style.
  • .btn-sm and .btn-lg scale button size; leaving them off gives the default size.
  • Full-width buttons use d-grid or w-100 instead of the removed .btn-block.
  • Disable real buttons with the disabled attribute; disable link-buttons with .disabled + aria-disabled.
  • .btn works identically on <button>, <a>, and <input> elements.

Summary

Buttons are a small component with an outsized impact on how polished your UI feels. With .btn, a color variant, and a handful of modifiers for size and state, you can cover nearly every button use case without writing custom CSS. Next, you'll move on to forms, where Bootstrap's styling really shines for building clean, usable input layouts.

Next Lesson →

Forms