Bootstrap Buttons — Button Styles, Sizes, and States

In this tutorial, you will learn about Bootstrap Buttons. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap buttons use contextual color classes (btn-primary, btn-danger) with outline, size, block, active, and disabled variants for consistent interactive elements.

What You'll Learn

You will learn how to create styled buttons with contextual colors, use outline buttons, control button sizes, create block-level buttons, and handle active and disabled states.

Why It Matters

Buttons drive user interaction. DodaTech's download pages use large primary buttons with hover effects and disabled states for unavailable options.

Real-World Use

Doda Browser uses btn-primary btn-lg for the main download button, btn-outline-secondary for secondary actions, and btn-danger for destructive operations.

flowchart LR
    A[Form Validation] --> B[Buttons]
    B --> C[Color Variants]
    B --> D[Outline Buttons]
    B --> E[Sizes]
    B --> F[States]
    B --> G[Block Buttons]
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Button Colors

<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-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>

Expected output: Nine buttons in different colors using Bootstrap's semantic palette.

Outline Buttons

<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Danger</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-info">Info</button>
<button class="btn btn-outline-light">Light</button>
<button class="btn btn-outline-dark">Dark</button>

Expected output: Eight buttons with colored borders and transparent backgrounds that fill with color on hover.

Button Sizes

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

Expected output: Three buttons in large (padding: 0.5rem 1rem, font: 1.25rem), default, and small (padding: 0.25rem 0.5rem, font: 0.875rem) sizes.

Block Buttons

<div class="d-grid gap-2">
  <button class="btn btn-primary">Full-width button</button>
  <button class="btn btn-secondary">Full-width button</button>
</div>

<div class="d-grid gap-2 d-md-block mt-3">
  <button class="btn btn-primary me-2">Inline on medium</button>
  <button class="btn btn-secondary">Inline on medium</button>
</div>

Expected output: Two full-width buttons stacked vertically, and below them a row of buttons that only become block on small screens.

Active and Disabled States

<button class="btn btn-primary active">Active button</button>
<button class="btn btn-primary" disabled>Disabled button</button>
<button class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>

Expected output: An active button with darker styling, a disabled button that appears grayed and unclickable, and a toggle button that switches between active and normal on click.

Buttons on Other Elements

<a class="btn btn-primary" href="#" role="button">Link as button</a>
<input class="btn btn-primary" type="submit" value="Submit input">
<input class="btn btn-primary" type="reset" value="Reset input">

Expected output: An anchor and two input elements styled as Bootstrap buttons.

Note that using .btn classes on <a> and <input> elements works, but the interactive behavior differs. Use <button> for actions triggered by JavaScript.

Button Toggle States

<div class="btn-group" role="group" aria-label="Basic toggle button group">
  <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="option1">Option 1</label>

  <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
  <label class="btn btn-outline-primary" for="option2">Option 2</label>

  <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off">
  <label class="btn btn-outline-primary" for="option3">Option 3</label>
</div>

Expected output: Three toggle buttons where only one can be selected at a time, like radio buttons.

Common Mistakes

1. Using Anchor Tags Without role="button"

Anchor tags styled as buttons need role="button" for Accessibility. Without it, screen readers do not announce them as buttons.

2. Forgetting the btn Base Class

Adding btn-primary without btn produces no button styling. The btn class is required before any variant.

3. Disabled Buttons Without Pointer Events

Disabled buttons with disabled attribute still receive hover and click events in some browsers. Bootstrap adds pointer-events: none to prevent this.

4. Using btn-link for All Links

btn-link makes an element look like a link but behave like a button. Use it for JavaScript actions, not for navigation links.

5. Not Including Button Type Attribute

Buttons inside forms default to type="submit". Always specify type="button" for buttons that do not submit a form.

Practice Questions

1. What base class is required for all Bootstrap buttons? btn must be added before any color variant class.

2. How do you create a large primary button? btn btn-primary btn-lg creates a large primary button.

3. What is the difference between btn and btn-outline? btn-primary has a filled background. btn-outline-primary has only a border and fills on hover.

4. How do you make a button full width? Place the button inside a d-grid container, or add w-100 to the button.

5. How do you disable a button? Add the disabled attribute (boolean) to the button element.

Challenge

Create a toolbar with a primary action button (large, full-width on mobile), two outline secondary buttons, and a disabled button for an unavailable feature. Use responsive d-grid classes.

FAQ

Mini Project

Build a download page with three download buttons (Windows, Mac, Linux) using btn-lg and btn-primary. Add a disabled "Coming Soon" button for a fourth platform. Use d-grid for mobile-friendly stacking.

What's Next

Learn Button Groups for grouped button layouts. Then explore Navbar for navigation components.