Skip to main content
Bootstrap
CHAPTER 16 Beginner

Bootstrap Icons and Helper Classes

Updated: May 18, 2026
5 min read

# CHAPTER 16

Bootstrap Icons and Helper Classes

1. Chapter Introduction

Bootstrap Icons is a free, open-source SVG icon library with 1,800+ icons designed specifically for Bootstrap. Combined with Bootstrap's helper classes for visibility, overflow, shadows, and cursor, you have a complete toolbox for polishing any UI.

2. Learning Objectives

  • Add Bootstrap Icons via CDN.
  • Use icon classes inline, in buttons, and in navs.
  • Apply size and color utilities to icons.
  • Use visibility utilities.
  • Understand overflow and cursor helpers.

3. Setting Up Bootstrap Icons

html
123456 
<!-- CDN (add to <head>) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" />

<!-- npm -->
<!-- npm install bootstrap-icons -->
<!-- @import "bootstrap-icons/font/bootstrap-icons.css"; -->

4. Using Icons

html
123456789101112131415161718192021 
<!-- Basic usage: <i class="bi bi-{icon-name}"></i> -->
<i class="bi bi-house"></i>          <!-- Home icon -->
<i class="bi bi-person"></i>         <!-- Person/User -->
<i class="bi bi-envelope"></i>       <!-- Email -->
<i class="bi bi-gear"></i>           <!-- Settings gear -->
<i class="bi bi-search"></i>         <!-- Search magnifier -->
<i class="bi bi-bell"></i>           <!-- Notification bell -->
<i class="bi bi-cart"></i>           <!-- Shopping cart -->
<i class="bi bi-heart"></i>          <!-- Heart/Like -->
<i class="bi bi-trash"></i>          <!-- Delete trash -->
<i class="bi bi-pencil"></i>         <!-- Edit pencil -->
<i class="bi bi-check-circle"></i>   <!-- Success check -->
<i class="bi bi-x-circle"></i>       <!-- Error X -->
<i class="bi bi-star-fill"></i>      <!-- Filled star (rating) -->
<i class="bi bi-github"></i>         <!-- GitHub brand -->
<i class="bi bi-linkedin"></i>       <!-- LinkedIn brand -->
<i class="bi bi-twitter-x"></i>      <!-- X (Twitter) brand -->
<i class="bi bi-arrow-left"></i>     <!-- Back arrow -->
<i class="bi bi-download"></i>       <!-- Download -->
<i class="bi bi-upload"></i>         <!-- Upload -->
<i class="bi bi-three-dots-vertical"></i> <!-- Options menu -->

5. Icon Sizes and Colors

html
1234567891011121314151617 
<!-- Size via font-size -->
<i class="bi bi-house fs-1"></i>   <!-- 2.5rem -->
<i class="bi bi-house fs-2"></i>   <!-- 2rem -->
<i class="bi bi-house fs-3"></i>   <!-- 1.75rem -->
<i class="bi bi-house fs-4"></i>   <!-- 1.5rem -->
<i class="bi bi-house fs-5"></i>   <!-- 1.25rem -->
<i class="bi bi-house fs-6"></i>   <!-- 1rem (default) -->

<!-- Custom size -->
<i class="bi bi-house" style="font-size: 4rem;"></i>

<!-- Colors via text utilities -->
<i class="bi bi-check-circle text-success fs-3"></i>
<i class="bi bi-x-circle text-danger fs-3"></i>
<i class="bi bi-exclamation-triangle text-warning fs-3"></i>
<i class="bi bi-info-circle text-info fs-3"></i>
<i class="bi bi-star-fill text-warning"></i>

6. Icons in Buttons and Navs

html
123456789101112131415161718192021222324 
<!-- Icon only button -->
<button class="btn btn-danger"><i class="bi bi-trash"></i></button>
<button class="btn btn-primary"><i class="bi bi-send"></i></button>

<!-- Icon + text -->
<button class="btn btn-success"><i class="bi bi-check-lg me-2"></i>Approve</button>
<button class="btn btn-outline-primary"><i class="bi bi-download me-2"></i>Download</button>

<!-- Icon in nav links -->
<ul class="nav flex-column">
  <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-house me-2"></i>Home</a></li>
  <li class="nav-item"><a class="nav-link active" href="#"><i class="bi bi-bar-chart me-2"></i>Analytics</a></li>
  <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-people me-2"></i>Users</a></li>
</ul>

<!-- Icon in form input groups -->
<div class="input-group mb-3">
  <span class="input-group-text"><i class="bi bi-search"></i></span>
  <input type="text" class="form-control" placeholder="Search..." />
</div>
<div class="input-group mb-3">
  <span class="input-group-text"><i class="bi bi-envelope"></i></span>
  <input type="email" class="form-control" placeholder="Email address" />
</div>

7. Visibility and Display Helpers

html
1234567891011121314151617181920 
<!-- Invisible (hidden but takes space) vs d-none (hidden, no space) -->
<div class="invisible">Hidden but takes up space</div>
<div class="d-none">Hidden AND takes no space</div>

<!-- Visually hidden (hidden visually but readable by screen readers) -->
<span class="visually-hidden">Screen reader only text</span>

<!-- Visible -->
<div class="visible">Explicitly visible</div>

<!-- Overflow utilities -->
<div class="overflow-auto" style="height: 100px;">Scrollable content...</div>
<div class="overflow-hidden">Clips content that overflows</div>
<div class="overflow-visible">Shows overflowing content</div>
<div class="overflow-scroll">Always shows scrollbar</div>

<!-- Object fit utilities (for images/videos) -->
<img src="photo.jpg" class="img-fluid object-fit-cover" style="height: 200px;" />
<img src="photo.jpg" class="img-fluid object-fit-contain" style="height: 200px;" />
<img src="photo.jpg" class="img-fluid object-fit-fill" style="height: 200px;" />

8. Cursor and Interaction Helpers

html
123456789101112131415161718 
<!-- Cursor utilities -->
<div class="cursor-auto">Default cursor</div>
<button class="btn btn-primary" style="cursor: pointer;">Pointer</button>
<div class="pe-none">Click-through (pointer events none)</div>
<div class="pe-auto">Pointer events enabled (override pe-none)</div>

<!-- User select -->
<p class="user-select-all">Click to select all text</p>
<p class="user-select-none">Cannot be selected</p>
<p class="user-select-auto">Default selection</p>

<!-- Stretched link (makes entire card clickable) -->
<div class="card">
  <div class="card-body">
    <h5>Card Title</h5>
    <a href="#" class="stretched-link">This link makes the entire card clickable</a>
  </div>
</div>

9. Clearfix and Float

html
12345678 
<!-- Float utilities -->
<img src="photo.jpg" class="float-start me-3 mb-2" style="width: 150px;" />
<p>Text wraps around the left-floated image...</p>
<div class="clearfix"></div>  <!-- Clears floats -->

<img src="photo.jpg" class="float-end ms-3 mb-2" style="width: 150px;" />
<p>Text wraps around the right-floated image...</p>
<div class="clearfix"></div>

10. MCQs

Question 1

Bootstrap Icons CDN goes in?

Question 2

Icon class syntax?

Question 3

Large icon (2.5rem) size class?

Question 4

invisible vs d-none?

Question 5

Screen-reader-only text class?

Question 6

stretched-link makes?

Question 7

Icon color is controlled by?

Question 8

pe-none does?

Question 9

object-fit-cover on images?

Question 10

How many icons in Bootstrap Icons v1.11?

11. Interview Questions

  • Q: How do you make an entire Bootstrap card clickable with a single CSS class?
  • Q: What is the difference between d-none and invisible?

12. Summary

Bootstrap Icons adds a comprehensive 1,800+ SVG icon library that integrates perfectly with Bootstrap's text/color utilities. The bi bi-iconname pattern is consistent and predictable. Helper classes for visibility, overflow, object-fit, and cursor polish every UI detail without touching a CSS file.

13. Next Chapter Recommendation

In Chapter 17: Bootstrap Responsive Design Techniques, we master advanced responsive patterns — mobile-first development, responsive visibility, adaptive layouts, and build a complete responsive landing page.

Finish this Chapter

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

Previous Chapter Bootstrap Flexbox and Layout Utilities
Next Chapter Bootstrap Responsive Design Techniques

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 1