BootstrapHow-ToBeginner · 3 min read

How to Use Bootstrap Icons: Simple Guide with Examples

To use Bootstrap Icons, first include the Bootstrap Icons CSS via CDN in your HTML <head>. Then add icons by placing an <i> or <svg> element with the appropriate icon class like bi bi-alarm inside your HTML.

📐

Syntax

Bootstrap Icons use CSS classes to display icons. You add an icon by including an element with the bi class plus the specific icon name, for example bi-alarm. The element is usually an <i> or <svg> tag.

Example parts:

bi: base class for all Bootstrap Icons
bi-alarm: specific icon name (alarm icon)

html

<i class="bi bi-alarm"></i>

Output

⏰

💻

Example

This example shows how to include Bootstrap Icons via CDN and use the alarm icon in a simple HTML page.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Icons Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>
<body>
  <h1>Alarm Icon Example</h1>
  <i class="bi bi-alarm" style="font-size: 3rem; color: #007bff;"></i>
</body>
</html>

Output

<h1>Alarm Icon Example</h1> followed by a large blue alarm clock icon

⚠️

Common Pitfalls

Common mistakes when using Bootstrap Icons include:

Not including the Bootstrap Icons CSS file, so icons do not show.
Using incorrect or misspelled icon class names.
Forgetting the base bi class along with the icon name.
Trying to use icons without proper HTML elements or styles.

Always check the official icon name on the Bootstrap Icons website.

html

<!-- Wrong: missing base class -->
<i class="bi-alarm"></i>

<!-- Right: includes base class -->
<i class="bi bi-alarm"></i>

Output

Wrong: no icon shown; Right: alarm icon shown

📊

Quick Reference

Usage	Description
	Include Bootstrap Icons CSS via CDN
	Add alarm icon
	Add filled heart icon
Use `style` or CSS to change size and color	Customize icon appearance

✅

Key Takeaways

Always include the Bootstrap Icons CSS file before using icons.

Use both the base class bi and the specific icon class like bi-alarm.

Check icon names carefully on the official Bootstrap Icons site to avoid typos.

Icons are scalable and styleable with CSS for size and color changes.

Use semantic HTML elements and accessible labels if icons convey meaning.