Bootstrap Icons Tutorial | Nikhil Learn Hub

What are Bootstrap Icons?

Bootstrap Icons is an official open-source icon library designed to work smoothly with Bootstrap projects. Icons are lightweight SVG-based glyphs exposed through classes like bi bi-alarm.

1. Setup and Usage

<!-- Add Bootstrap Icons CDN in <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">

<!-- Use icons with bi classes -->
<i class="bi bi-house"></i>
<i class="bi bi-envelope-fill"></i>
<i class="bi bi-check-circle"></i>

2. Size, Color, and Spacing

<i class="bi bi-star fs-1 text-warning"></i>
<i class="bi bi-heart-fill fs-3 text-danger ms-2"></i>
<i class="bi bi-chat-dots fs-5 text-primary me-1"></i> Messages

3. Icons in Components

<button class="btn btn-primary">
  <i class="bi bi-download me-2"></i>Download
</button>

<div class="alert alert-success mt-3">
  <i class="bi bi-check-circle-fill me-2"></i>Profile updated successfully.
</div>

<div class="input-group mt-3">
  <span class="input-group-text"><i class="bi bi-search"></i></span>
  <input type="text" class="form-control" placeholder="Search">
</div>

4. Practical UI Examples

<!-- Social icon row -->
<div class="d-flex gap-3 fs-3">
  <a href="#" class="text-decoration-none"><i class="bi bi-facebook text-primary"></i></a>
  <a href="#" class="text-decoration-none"><i class="bi bi-twitter text-info"></i></a>
  <a href="#" class="text-decoration-none"><i class="bi bi-instagram text-danger"></i></a>
  <a href="#" class="text-decoration-none"><i class="bi bi-linkedin text-primary"></i></a>
</div>

<!-- Feature list with icons -->
<ul class="list-unstyled">
  <li class="mb-2"><i class="bi bi-lightning-charge-fill text-warning me-2"></i>Fast performance</li>
  <li class="mb-2"><i class="bi bi-shield-check text-success me-2"></i>Secure defaults</li>
  <li class="mb-2"><i class="bi bi-phone text-primary me-2"></i>Mobile friendly</li>
</ul>

Quick Reference

Pattern	Example
Basic icon	`<i class="bi bi-house"></i>`
Size utility	`fs-1` to `fs-6`
Color utility	`text-primary`, `text-success`, `text-danger`
Icon spacing	`me-1`, `ms-2`, `gap-2`
Icon in button	`<i class="bi bi-plus me-1"></i> Add`
Icon in input group	`<span class="input-group-text"><i class="bi bi-search"></i></span>`