Bootstrap 5 Framework

Buttons

13 min Lesson 17 of 40

Introduction to Bootstrap Buttons

Bootstrap provides extensive button styling and functionality. Buttons are one of the most commonly used components, offering various styles, sizes, and states to match your design needs.

Note: Bootstrap 5 buttons work seamlessly with the new utility API and can be easily customized with Sass variables.

Button Styles and Variants

Bootstrap offers multiple button styles using contextual classes:

<!-- Primary button variants -->
<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>
                

Tip: Use semantic button classes to convey meaning (success for positive actions, danger for destructive actions, etc.).

Outline Buttons

Create ghost buttons with outline styles by replacing btn-* with btn-outline-*:

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

Button Sizes

Bootstrap provides three button sizes: large, default, and small:

<!-- Large button -->
<button type="button" class="btn btn-primary btn-lg">Large button</button>

<!-- Default button -->
<button type="button" class="btn btn-primary">Default button</button>

<!-- Small button -->
<button type="button" class="btn btn-primary btn-sm">Small button</button>

<!-- Block button (full width) -->
<div class="d-grid gap-2">
    <button class="btn btn-primary" type="button">Block button</button>
    <button class="btn btn-secondary" type="button">Block button</button>
</div>
                

Bootstrap 5 Change: Block buttons now use utility classes (d-grid) instead of btn-block.

Button Groups

Group a series of buttons together on a single line with button groups:

<!-- Basic button group -->
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

<!-- Button toolbar -->
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar example">
    <div class="btn-group me-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-outline-secondary">1</button>
        <button type="button" class="btn btn-outline-secondary">2</button>
        <button type="button" class="btn btn-outline-secondary">3</button>
    </div>
    <div class="btn-group me-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-outline-secondary">4</button>
        <button type="button" class="btn btn-outline-secondary">5</button>
    </div>
    <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-outline-secondary">6</button>
    </div>
</div>

<!-- Vertical button group -->
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
    <button type="button" class="btn btn-primary">Button</button>
    <button type="button" class="btn btn-primary">Button</button>
    <button type="button" class="btn btn-primary">Button</button>
</div>
                

Toggle Buttons and States

Create toggle buttons with checkbox or radio functionality:

<!-- Checkbox toggle buttons -->
<div class="btn-group" role="group" aria-label="Checkbox toggle group">
    <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

    <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

    <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>

<!-- Radio toggle buttons -->
<div class="btn-group" role="group" aria-label="Radio toggle group">
    <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
    <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

    <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
    <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

    <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
    <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>
                

Button States

Buttons can have different states for user interaction:

<!-- Active state -->
<button type="button" class="btn btn-primary active" aria-pressed="true">Active button</button>

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

<!-- Link with disabled appearance -->
<a class="btn btn-primary disabled" role="button" aria-disabled="true">Disabled link</a>

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

Warning: Disabled buttons using <a> tags should use aria-disabled="true" and prevent default behavior with JavaScript.

Button Tags

Button classes can be used with various HTML elements:

<!-- Button element -->
<button class="btn btn-primary" type="button">Button</button>

<!-- Link styled as button -->
<a class="btn btn-primary" href="#" role="button">Link</a>

<!-- Input button -->
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
                

Exercise: Create a Button Toolbar

Create a complete button toolbar with the following requirements:

Create a toolbar with three button groups
First group: Undo, Redo buttons (outline-primary)
Second group: Cut, Copy, Paste buttons (outline-secondary)
Third group: Bold, Italic, Underline toggle buttons (outline-dark)
Add appropriate spacing between groups
Include a large "Save" button (primary) at the end
Make all buttons accessible with proper ARIA labels

Best Practices

Use semantic button classes to communicate action types
Always include descriptive text or aria-labels for icon-only buttons
Use type="button" for buttons that don't submit forms
Provide clear visual feedback for interactive states
Keep button text concise and action-oriented
Use consistent button sizes throughout your application
Consider mobile tap targets (minimum 44×44 pixels)
Don't use outline buttons on backgrounds with similar colors

Summary

In this lesson, you learned about Bootstrap buttons including various styles, sizes, outline buttons, button groups and toolbars, and toggle button functionality. Buttons are essential UI components that provide clear calls-to-action and interactive elements throughout your application.