Bootstrap has its own icon library, Bootstrap Icons, which can be used with simple <i> or <span> elements.
Add the Bootstrap Icons CDN to your project.
Use the bi class with an icon name.
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
</head>
<body>
<i class="bi bi-alarm"></i> Alarm Icon
</body>
✅ Explanation:
The <i> element with bi bi-alarm displays an alarm icon.
You can replace bi-alarm with any Bootstrap icon name.
Here are some commonly used icons:
| Icon | Code |
|---|---|
| 🔔 Notification | <i class="bi bi-bell"></i> |
| 🏠 Home | <i class="bi bi-house"></i> |
| 📩 Envelope | <i class="bi bi-envelope"></i> |
| 🔍 Search | <i class="bi bi-search"></i> |
👉 Example: Adding Multiple Icons
<i class="bi bi-heart text-danger fs-3"></i>
<i class="bi bi-star text-warning fs-4"></i>
✅ Explanation:
text-danger → Red color
text-warning → Yellow color
fs-3 → Larger size
fs-4 → Even larger size
Badges are small UI elements used to display numbers, notifications, or labels.
Use the .badge class inside elements like <span> or <button>.
Use bg-* classes to change colors.
<span class="badge bg-primary">New</span>
You can attach badges to buttons to indicate notifications.
<button type="button" class="btn btn-danger">
Notifications <span class="badge bg-light text-dark">4</span>
</button>
You can use badges inside lists to display counts.
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Messages <span class="badge bg-success">5</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Notifications <span class="badge bg-danger">12</span>
</li>
</ul>
✅ Explanation:
list-group → Creates a list UI
justify-content-between → Spreads list items and badges
bg-success & bg-danger → Changes badge color
Use position-absolute and top-0 start-100 translate-middle to position badges.
<div class="position-relative d-inline-block">
<i class="bi bi-bell fs-2"></i>
<span class="position-absolute top-0 start-100 translate-middle badge bg-danger">3</span>
</div>
Rounded Badges: Default badges have sharp corners.
Pill Badges: Use .rounded-pill for oval shapes.
<span class="badge bg-info rounded-pill">New Update</span>
Bootstrap’s Icons & Badges make your UI more interactive by adding visual indicators.
Icons: Use bi classes for Bootstrap icons.
Badges: Use .badge with bg-* for colors.
Customization: Resize, position, and color badges/icons using Bootstrap utilities.
💡 Now, you can easily add icons & badges to your Bootstrap projects! 🚀