Buttons and Button Groups

1. Lesson Introduction

(1) Prerequisites

Lesson 08: Navbar

(2) 🎯 What You Will Learn

Using Bootstrap button variants (color, size, outline)
Controlling button states (disabled, loading)
Combining related buttons using button groups
Building toolbars with btn-toolbar
Implementing toggle buttons and block-level buttons

(3) Pain Point

Alice's registration page needs three buttons: submit (blue primary button), reset (gray secondary button), and login with existing account (link style) -- each button has a different style but all are based on the .btn base class.

(4) Solution

Bootstrap provides a rich set of button styles and size options, as well as the ability to combine and arrange buttons in groups.

(5) Benefits

With Bootstrap's button system, you can implement professional, consistent, and accessible button interfaces without writing custom CSS.

2. Button Basics

Bootstrap uses .btn as the base button class, combined with color variants:

HTML

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

▶ Try it Yourself

▶ Example: Button Variant Showcase

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Button Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5>Standard Buttons</h5>
    <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>

    <hr>

    <h5>Outline Buttons</h5>
    <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>

    <hr>

    <h5>Button Sizes</h5>
    <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>
  </div>
</body>
</html>

▶ Try it Yourself

3. Button Variants

(1) Color Semantics

Class	Color	Usage
`btn-primary`	Blue	Primary actions (submit, next step)
`btn-secondary`	Gray	Secondary actions (cancel, back)
`btn-success`	Green	Success actions (save, confirm)
`btn-danger`	Red	Dangerous actions (delete, exit)
`btn-warning`	Yellow	Warning actions
`btn-info`	Cyan	Informational actions
`btn-light`	White	Use on light backgrounds
`btn-dark`	Black	Use on dark backgrounds
`btn-link`	Link color	Disguise a button as a link

(2) Outline Buttons

HTML

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

▶ Try it Yourself

(3) Button Sizes

Class	Font Size	Padding	Scenario
`btn-lg`	1.25rem	0.5rem 1rem	Prominent CTAs, Hero sections
Default	1rem	0.375rem 0.75rem	General purpose
`btn-sm`	0.875rem	0.25rem 0.5rem	Inside tables, compact spaces

4. Button States

HTML

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

<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

▶ Try it Yourself

5. Block Buttons

HTML

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Full-width block button</button>
  <button class="btn btn-outline-secondary" type="button">Also full width</button>
</div>

▶ Try it Yourself

6. Button Groups

HTML

<div class="btn-group" role="group">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Middle</button>
  <button class="btn btn-primary">Right</button>
</div>

▶ Try it Yourself

(1) Button Group Variants

HTML

<div class="btn-group-vertical">
  <button class="btn btn-primary">Top</button>
  <button class="btn btn-primary">Middle</button>
  <button class="btn btn-primary">Bottom</button>
</div>

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group me-2">
    <button class="btn btn-outline-secondary">B</button>
    <button class="btn btn-outline-secondary">I</button>
    <button class="btn btn-outline-secondary">U</button>
  </div>
  <div class="btn-group">
    <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>
</div>

▶ Try it Yourself

Class	Effect	Scenario
`btn-group`	Horizontal grouping	Toolbars, pagination
`btn-group-vertical`	Vertical grouping	Sidebar options
`btn-toolbar`	Combines multiple groups into a toolbar	Rich text editors

7. Button Decisions & Reference

(1) Button Variant Selection Flow

graph TD
    A[Need a button] --> B{Primary or secondary?}
    B -->|Primary action| C{Color selection}
    B -->|Secondary action| D[btn-outline-* or btn-link]
    C --> E[Submit/Save → btn-primary]
    C --> F[Danger/Delete → btn-danger]
    C --> G[Success/Confirm → btn-success]
    C --> H[Warning/Alert → btn-warning]
    D --> I{Bordered?}
    I -->|Yes| J[btn-outline-primary / outline-danger]
    I -->|No| K[btn-link link style]
    A --> L{Size requirement?}
    L --> M[Prominent → btn-lg]
    L --> N[Standard → Default]
    L --> O[Compact → btn-sm]
    A --> P{Grouped?}
    P --> Q[btn-group horizontal / btn-group-vertical vertical]

(2) Button Size Complete Reference

Class	Font Size	padding-y	padding-x	Border Radius	Scenario
`btn-lg`	1.25rem	0.5rem	1rem	0.5rem	CTAs, Hero sections
Default	1rem	0.375rem	0.75rem	0.375rem	General buttons
`btn-sm`	0.875rem	0.25rem	0.5rem	0.25rem	Tables, compact spaces

(3) Button Group Type Reference

Class	Layout	HTML Structure	Scenario
`btn-group`	Horizontal arrangement	`div.btn-group > button*N`	Pagination, action groups
`btn-group-vertical`	Vertical arrangement	`div.btn-group-vertical > button*N`	Sidebar buttons
`btn-toolbar`	Combines multiple btn-groups	`div.btn-toolbar > div.btn-group*N`	Rich text editors
`btn-group` + `dropup`	Opens upward	`div.btn-group.dropup`	Upload menus
`btn-group` + `dropend`	Opens to the right	`div.btn-group.dropend`	Side menus

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Button Toolbar</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5>Rich Text Editor Toolbar</h5>

    <div class="btn-toolbar mb-3" role="toolbar" aria-label="Formatting toolbar">
      <div class="btn-group me-2" role="group" aria-label="Text style">
        <button type="button" class="btn btn-outline-secondary">B</button>
        <button type="button" class="btn btn-outline-secondary">I</button>
        <button type="button" class="btn btn-outline-secondary">U</button>
      </div>
      <div class="btn-group me-2" role="group" aria-label="Alignment">
        <button type="button" class="btn btn-outline-secondary">⬅</button>
        <button type="button" class="btn btn-outline-secondary">⬇</button>
        <button type="button" class="btn btn-outline-secondary">➡</button>
      </div>
      <div class="btn-group" role="group" aria-label="Actions">
        <button type="button" class="btn btn-outline-secondary">🔗</button>
        <button type="button" class="btn btn-outline-secondary">📷</button>
      </div>
    </div>

    <p class="text-muted small">btn-toolbar combines multiple btn-groups, me-2 controls group spacing</p>
  </div>
</body>
</html>

▶ Try it Yourself

▶ Example: Toggle Buttons

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toggle Buttons</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5 class="mb-3">Radio Toggle</h5>
    <div class="btn-group mb-4" role="group" aria-label="Basic radio toggle">
      <input type="radio" class="btn-check" name="options" id="option1" checked>
      <label class="btn btn-outline-primary" for="option1">Day View</label>

      <input type="radio" class="btn-check" name="options" id="option2">
      <label class="btn btn-outline-primary" for="option2">Week View</label>

      <input type="radio" class="btn-check" name="options" id="option3">
      <label class="btn btn-outline-primary" for="option3">Month View</label>
    </div>

    <h5 class="mb-3">Checkbox Toggle</h5>
    <div class="btn-group" role="group" aria-label="Basic checkbox toggle">
      <input type="checkbox" class="btn-check" id="checkbox1">
      <label class="btn btn-outline-success" for="checkbox1">Bold</label>

      <input type="checkbox" class="btn-check" id="checkbox2">
      <label class="btn btn-outline-success" for="checkbox2">Italic</label>

      <input type="checkbox" class="btn-check" id="checkbox3">
      <label class="btn btn-outline-success" for="checkbox3">Underline</label>
    </div>

    <p class="text-muted small mt-3">Uses <code>btn-check</code> + <code>&lt;label&gt;</code> to achieve toggle effect, no JavaScript required.</p>
  </div>
</body>
</html>

▶ Try it Yourself

▶ Example: Loading State Buttons

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loading Buttons</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5 class="mb-4">Loading State Buttons</h5>

    <div class="d-flex gap-2 mb-3">
      <button class="btn btn-primary" disabled>
        <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
        Loading...
      </button>
      <button class="btn btn-success" disabled>
        <span class="spinner-grow spinner-grow-sm me-2" role="status" aria-hidden="true"></span>
        Saving...
      </button>
      <button class="btn btn-danger" disabled>
        <span class="spinner-border spinner-border-sm me-2" role="status"></span>
        Deleting...
      </button>
    </div>

    <div class="d-flex gap-2">
      <button class="btn btn-outline-primary" disabled>
        <span class="spinner-border spinner-border-sm me-2" role="status"></span>
        Connecting...
      </button>
      <button class="btn btn-outline-success">
        <span class="spinner-border spinner-border-sm me-2 d-none" role="status"></span>
        Submit Button
      </button>
    </div>

    <p class="text-muted small mt-3">Uses <code>spinner-border</code> or <code>spinner-grow</code> with <code>disabled</code> to implement loading state.</p>
  </div>
</body>
</html>

▶ Try it Yourself

▶ Example: Block Buttons

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Block Buttons</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5 class="mb-3">Block Buttons (d-grid)</h5>

    <div class="d-grid gap-2 mb-4">
      <button class="btn btn-primary btn-lg" type="button">Primary Action — Full-width button</button>
      <button class="btn btn-outline-secondary" type="button">Secondary Action</button>
    </div>

    <h5 class="mb-3">Responsive Block</h5>
    <div class="d-grid gap-2 d-md-block">
      <button class="btn btn-primary me-md-2" type="button">Desktop Side-by-side</button>
      <button class="btn btn-outline-secondary" type="button">Mobile Stacked</button>
    </div>

    <p class="text-muted small mt-3">
      <code>d-grid gap-2</code> implements stacked full-width buttons, <code>d-md-block</code> restores side-by-side on desktop.
    </p>

    <hr>

    <h5 class="mb-3">Button Group Block Variant</h5>
    <div class="d-grid gap-2">
      <div class="btn-group" role="group">
        <button class="btn btn-primary">Option One</button>
        <button class="btn btn-primary">Option Two</button>
        <button class="btn btn-primary">Option Three</button>
      </div>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

❓ Frequently Asked Questions

Q What is the difference between using a <button> and an <a> as a button?

A <button> is used to trigger form submissions or interactive actions (submit, save, delete). <a> is used for page navigation (detail pages, external links). Semantically, a button does something, an 'a' goes somewhere.

Q What does type="button" on a button do?

A It prevents the button from triggering a form submission. Inside a <form>, a <button> defaults to type="submit", which will refresh the page on click. Explicitly specifying type="button" avoids this behavior.

Q How can I customize button colors?

A Two ways: (1) Override Bootstrap's CSS variables -- --bs-btn-bg, --bs-btn-color, --bs-btn-hover-bg; (2) In Phase 5, customize via Sass variable $theme-colors.

Q Can button groups be nested?

A Yes. You can place another btn-group inside a btn-group to create dropdown groups, for example:

<div class="btn-group"><button>1</button><div class="btn-group"><button class="dropdown-toggle">More</button><ul class="dropdown-menu">...</ul></div></div>

. Nested button groups will remain on the same line, suitable for a "more" button in a pagination component.

Q Can icons be placed inside buttons? How to make a pure icon button?

A Yes. Simply place an <i> or <svg> directly inside the <button>. For pure icon buttons, it's recommended to add aria-label for text description: <button class="btn btn-outline-secondary" aria-label="Search"><svg ...></svg></button>. Bootstrap Icons is the official companion icon library, use <i class="bi bi-search"></i> to embed it.

📖 Summary

.btn base class + color variant btn-{color} defines button appearance
btn-outline-{color} outline buttons, btn-lg/sm control size
disabled attribute disables buttons, spinner-border adds loading state
btn-group / btn-group-vertical combines buttons, btn-toolbar organizes toolbars

📝 Assignments

⭐ Create a bottom action bar for a form: Submit (btn-primary btn-lg), Save Draft (btn-outline-secondary), Delete (btn-outline-danger), Cancel (btn-link).
⭐⭐ Use btn-group to create a pagination component: Previous + Page numbers 1-5 + Next, with the selected page number highlighted as btn-primary.
⭐⭐⭐ Create a toolbar: Use btn-toolbar to combine two button groups: text formatting (B/I/U) and alignment (Left/Center/Right).

Previous Lesson: Navbar · Next Lesson: Cards

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us

404 Not Found

Buttons and Button Groups

1. Lesson Introduction

(1) Prerequisites

(2) 🎯 What You Will Learn

(3) Pain Point

(4) Solution

(5) Benefits

2. Button Basics

▶ Example: Button Variant Showcase

3. Button Variants

(1) Color Semantics

(2) Outline Buttons

(3) Button Sizes

4. Button States

5. Block Buttons

6. Button Groups

(1) Button Group Variants

7. Button Decisions & Reference

(1) Button Variant Selection Flow

(2) Button Size Complete Reference

(3) Button Group Type Reference

▶ Example: Button Toolbar

▶ Example: Toggle Buttons

▶ Example: Loading State Buttons

▶ Example: Block Buttons

❓ Frequently Asked Questions

📖 Summary

📝 Assignments

🙏 帮我们做得更好