Skip to main content
Bootstrap
CHAPTER 07 Beginner

Bootstrap Buttons

Updated: May 18, 2026
5 min read

# CHAPTER 7

Bootstrap Buttons

1. Chapter Introduction

Bootstrap provides 8 color variants, solid and outline styles, 3 sizes, disabled/active states, and button groups — all with a single class combination. This chapter covers every button feature in Bootstrap 5.

2. Learning Objectives

  • Apply all 8 button color variants and outline styles.
  • Control button sizes and states.
  • Create button groups and full-width buttons.
  • Add icons and loading spinners to buttons.

3. Button Variants

html
12345678910111213 
<!-- Solid buttons -->
<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>

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

4. Sizes, States, and Full-Width

html
12345678910111213141516171819 
<!-- Sizes -->
<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>

<!-- States -->
<button class="btn btn-primary active">Active</button>
<button class="btn btn-primary" disabled>Disabled</button>

<!-- Full width (Bootstrap 5) -->
<div class="d-grid gap-2">
  <button class="btn btn-primary">Full Width Button</button>
  <button class="btn btn-outline-secondary">Sign In</button>
</div>

<!-- Loading state -->
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm me-2"></span>Loading...
</button>

5. Button Groups

html
12345678910111213 
<div class="btn-group" role="group">
  <button class="btn btn-outline-primary active">Day</button>
  <button class="btn btn-outline-primary">Week</button>
  <button class="btn btn-outline-primary">Month</button>
</div>

<!-- Radio toggle buttons -->
<div class="btn-group">
  <input type="radio" class="btn-check" name="view" id="list" autocomplete="off" checked />
  <label class="btn btn-outline-secondary" for="list">List</label>
  <input type="radio" class="btn-check" name="view" id="grid" autocomplete="off" />
  <label class="btn btn-outline-secondary" for="grid">Grid</label>
</div>

6. Buttons with Icons

html
12345 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" />

<button class="btn btn-primary"><i class="bi bi-download me-2"></i>Download</button>
<button class="btn btn-success"><i class="bi bi-check-lg me-2"></i>Save</button>
<button class="btn btn-danger btn-sm"><i class="bi bi-trash"></i></button>

7. Common Mistakes

  • Bootstrap 4's .btn-block does not exist in Bootstrap 5. Use <div class="d-grid"> wrapper instead.
  • <a> used as button needs role="button" for accessibility.

8. MCQs

Question 1

Large primary button?

Question 2

Bootstrap 5 full-width button?

Question 3

Outline primary button class?

Question 4

Disable a button?

Question 5

Button group role attribute?

Question 6

Loading spinner size for buttons?

Question 7

Radio toggle buttons require?

Question 8

Vertical button group?

Question 9

Number of built-in color variants?

Question 10

.btn-link creates?

9. Interview Questions

  • Q: Explain the difference between .btn-primary and .btn-outline-primary.
  • Q: How do you create a block/full-width button in Bootstrap 5?

10. Summary

Bootstrap's button system handles every UI scenario. 8 solid variants, 8 outline variants, 3 sizes, disabled states, groups, and icon integration — all through simple class combinations. The d-grid pattern for full-width buttons and btn-group for toolbars are the two most common patterns in production UIs.

11. Next Chapter Recommendation

In Chapter 8: Bootstrap Forms, we build complete, validated form UIs with inputs, selects, checkboxes, floating labels, and HTML5 validation feedback.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Spacing and Sizing Utilities
Next Chapter Bootstrap Forms

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 1