Bootstrap 5 Framework

Bootstrap Icons and Typography

13 min Lesson 37 of 40

Bootstrap Icons and Typography

Bootstrap Icons is an official icon library with over 1,800 SVG icons. Combined with Bootstrap's advanced typography utilities, you can create visually rich and accessible interfaces.

Installing Bootstrap Icons

There are multiple ways to include Bootstrap Icons in your project:

<!-- CDN Link (easiest method) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">

<!-- NPM Installation -->
npm install bootstrap-icons

<!-- Using SVG Sprites -->
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>

<!-- Icon Fonts (after installing) -->
<i class="bi bi-heart-fill"></i>
        

Note: Using the icon font via CDN is the quickest way to get started. For production, consider using SVG sprites for better performance.

Basic Icon Usage

Icons use the bi base class followed by the icon name:

<!-- Basic Icons -->
<i class="bi bi-heart"></i>
<i class="bi bi-heart-fill"></i>
<i class="bi bi-star"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-person"></i>
<i class="bi bi-person-fill"></i>
<i class="bi bi-envelope"></i>
<i class="bi bi-envelope-fill"></i>
<i class="bi bi-cart"></i>
<i class="bi bi-cart-fill"></i>

<!-- Common UI Icons -->
<i class="bi bi-house"></i>
<i class="bi bi-search"></i>
<i class="bi bi-bell"></i>
<i class="bi bi-gear"></i>
<i class="bi bi-list"></i>
<i class="bi bi-x"></i>
<i class="bi bi-check"></i>
<i class="bi bi-chevron-right"></i>
<i class="bi bi-chevron-down"></i>
<i class="bi bi-arrow-right"></i>

<!-- Social Media Icons -->
<i class="bi bi-facebook"></i>
<i class="bi bi-twitter"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-linkedin"></i>
<i class="bi bi-github"></i>
<i class="bi bi-youtube"></i>
        

Tip: Browse the complete icon library at icons.getbootstrap.com to find the perfect icons for your project.

Icon Sizing

Control icon size using font-size or direct width/height properties:

<!-- Using Font Size Classes -->
<i class="bi bi-heart fs-1"></i> <!-- Extra large -->
<i class="bi bi-heart fs-2"></i> <!-- Large -->
<i class="bi bi-heart fs-3"></i> <!-- Medium-large -->
<i class="bi bi-heart fs-4"></i> <!-- Medium -->
<i class="bi bi-heart fs-5"></i> <!-- Small -->
<i class="bi bi-heart fs-6"></i> <!-- Extra small -->

<!-- Using Inline Styles -->
<i class="bi bi-star" style="font-size: 2rem;"></i>
<i class="bi bi-star" style="font-size: 3rem;"></i>
<i class="bi bi-star" style="font-size: 4rem;"></i>

<!-- Using Custom CSS -->
<style>
.icon-xs { font-size: 0.75rem; }
.icon-sm { font-size: 1rem; }
.icon-md { font-size: 1.5rem; }
.icon-lg { font-size: 2rem; }
.icon-xl { font-size: 3rem; }
</style>

<i class="bi bi-heart icon-lg"></i>

<!-- SVG Icons with Width/Height -->
<svg class="bi" width="16" height="16" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart"/>
</svg>

<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart"/>
</svg>
        

Icon Styling and Colors

Style icons using text color utilities and CSS properties:

<!-- Using Text Color Utilities -->
<i class="bi bi-heart text-danger"></i>
<i class="bi bi-star text-warning"></i>
<i class="bi bi-check-circle text-success"></i>
<i class="bi bi-info-circle text-primary"></i>
<i class="bi bi-exclamation-triangle text-warning"></i>

<!-- Using Inline Styles -->
<i class="bi bi-heart" style="color: #ff6b6b;"></i>
<i class="bi bi-star" style="color: #ffd93d;"></i>

<!-- Icons with Background -->
<span class="bg-primary text-white rounded-circle p-2">
    <i class="bi bi-bell"></i>
</span>

<span class="bg-success text-white rounded p-2">
    <i class="bi bi-check"></i>
</span>

<!-- Gradient Icons -->
<i class="bi bi-heart" style="background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i>

<!-- Icon with Shadow -->
<i class="bi bi-star text-warning" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.2);"></i>

<!-- Opacity -->
<i class="bi bi-heart text-danger opacity-75"></i>
<i class="bi bi-heart text-danger opacity-50"></i>
<i class="bi bi-heart text-danger opacity-25"></i>
        

Tip: Icons inherit the current text color by default, so you can easily change their color using Bootstrap's text color utilities.

Icon Buttons and Links

Combine icons with buttons and links for interactive elements:

<!-- Buttons with Icons -->
<button class="btn btn-primary">
    <i class="bi bi-download"></i> Download
</button>

<button class="btn btn-success">
    <i class="bi bi-check-circle"></i> Confirm
</button>

<button class="btn btn-danger">
    <i class="bi bi-trash"></i> Delete
</button>

<!-- Icon-only Buttons -->
<button class="btn btn-primary">
    <i class="bi bi-search"></i>
</button>

<button class="btn btn-outline-secondary">
    <i class="bi bi-heart"></i>
</button>

<!-- Rounded Icon Buttons -->
<button class="btn btn-primary rounded-circle" style="width: 40px; height: 40px;">
    <i class="bi bi-plus"></i>
</button>

<!-- Button Group with Icons -->
<div class="btn-group" role="group">
    <button class="btn btn-outline-primary"><i class="bi bi-align-left"></i></button>
    <button class="btn btn-outline-primary"><i class="bi bi-align-center"></i></button>
    <button class="btn btn-outline-primary"><i class="bi bi-align-right"></i></button>
</div>

<!-- Links with Icons -->
<a href="#" class="text-decoration-none">
    <i class="bi bi-arrow-right"></i> Learn more
</a>

<a href="#" class="text-danger">
    <i class="bi bi-heart-fill"></i> Add to favorites
</a>

<!-- Social Media Links -->
<div class="d-flex gap-3">
    <a href="#" class="text-primary fs-4"><i class="bi bi-facebook"></i></a>
    <a href="#" class="text-info fs-4"><i class="bi bi-twitter"></i></a>
    <a href="#" class="text-danger fs-4"><i class="bi bi-instagram"></i></a>
</div>
        

Icon with Text Alignment

Properly align icons with text for a polished appearance:

<!-- Inline with Text -->
<p>
    <i class="bi bi-check-circle text-success"></i> Task completed successfully
</p>

<p>
    <i class="bi bi-exclamation-triangle text-warning"></i> Warning message
</p>

<!-- Using Flexbox for Better Alignment -->
<div class="d-flex align-items-center gap-2">
    <i class="bi bi-info-circle text-primary"></i>
    <span>Information message with icon perfectly aligned</span>
</div>

<!-- List with Icons -->
<ul class="list-unstyled">
    <li class="d-flex align-items-center gap-2 mb-2">
        <i class="bi bi-check text-success"></i>
        <span>Feature one</span>
    </li>
    <li class="d-flex align-items-center gap-2 mb-2">
        <i class="bi bi-check text-success"></i>
        <span>Feature two</span>
    </li>
    <li class="d-flex align-items-center gap-2 mb-2">
        <i class="bi bi-check text-success"></i>
        <span>Feature three</span>
    </li>
</ul>

<!-- Alert with Icon -->
<div class="alert alert-info d-flex align-items-center" role="alert">
    <i class="bi bi-info-circle fs-4 me-2"></i>
    <div>This is an informational message with an icon.</div>
</div>

<!-- Card with Icon Header -->
<div class="card">
    <div class="card-body">
        <div class="d-flex align-items-center mb-3">
            <i class="bi bi-lightning-charge text-warning fs-3 me-2"></i>
            <h5 class="card-title mb-0">Fast Performance</h5>
        </div>
        <p class="card-text">Experience blazing-fast speeds.</p>
    </div>
</div>
        

Advanced Typography Utilities

Bootstrap provides advanced typography utilities for precise text control:

<!-- Text Decoration -->
<p class="text-decoration-none">No text decoration</p>
<p class="text-decoration-underline">Underlined text</p>
<p class="text-decoration-line-through">Strike-through text</p>

<!-- Line Height -->
<p class="lh-1">Line height 1</p>
<p class="lh-sm">Small line height</p>
<p class="lh-base">Base line height</p>
<p class="lh-lg">Large line height</p>

<!-- Font Weight -->
<p class="fw-light">Light text</p>
<p class="fw-lighter">Lighter text</p>
<p class="fw-normal">Normal text</p>
<p class="fw-bold">Bold text</p>
<p class="fw-bolder">Bolder text</p>

<!-- Font Style -->
<p class="fst-italic">Italic text</p>
<p class="fst-normal">Normal style text</p>

<!-- Font Monospace -->
<p class="font-monospace">This is in monospace font</p>
<code class="font-monospace">const x = 10;</code>

<!-- Letter Spacing (requires custom CSS) -->
<style>
.ls-tight { letter-spacing: -0.05em; }
.ls-normal { letter-spacing: 0; }
.ls-wide { letter-spacing: 0.1em; }
</style>

<p class="ls-wide">W I D E L Y  S P A C E D</p>
        

Text Wrapping and Truncation

Control how text wraps and overflows:

<!-- Text Wrapping -->
<div class="text-wrap" style="width: 200px;">
    This text will wrap normally within the container width.
</div>

<div class="text-nowrap">
    This text will not wrap and may overflow the container.
</div>

<!-- Text Truncation -->
<div class="text-truncate" style="max-width: 200px;">
    This text is too long and will be truncated with an ellipsis...
</div>

<!-- Word Break -->
<p class="text-break">
    Verylongwordthatwillbreakifneededtofitwithintheparentcontainerwidth
</p>

<!-- White Space -->
<div style="white-space: pre;">
    This     preserves    spacing
    and line breaks
</div>

<div style="white-space: pre-wrap;">
    This     preserves    spacing
    but wraps at container edge
</div>

<div style="white-space: pre-line;">
    This collapses multiple spaces
    but preserves line breaks
</div>

<!-- Practical Example: Truncated Card Title -->
<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title text-truncate">
            This is a very long card title that needs truncation
        </h5>
        <p class="card-text">Card content here.</p>
    </div>
</div>
        

Note: text-truncate requires the element to be display: block or display: inline-block and have a defined width or max-width.

Practical Icon Usage Examples

Real-world examples combining icons and typography:

<!-- Feature Cards with Icons -->
<div class="row g-4">
    <div class="col-md-4">
        <div class="card text-center">
            <div class="card-body">
                <i class="bi bi-lightning-charge text-warning" style="font-size: 3rem;"></i>
                <h5 class="card-title mt-3">Fast</h5>
                <p class="card-text">Lightning-fast performance</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card text-center">
            <div class="card-body">
                <i class="bi bi-shield-check text-success" style="font-size: 3rem;"></i>
                <h5 class="card-title mt-3">Secure</h5>
                <p class="card-text">Bank-level security</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card text-center">
            <div class="card-body">
                <i class="bi bi-phone text-primary" style="font-size: 3rem;"></i>
                <h5 class="card-title mt-3">Responsive</h5>
                <p class="card-text">Works on all devices</p>
            </div>
        </div>
    </div>
</div>

<!-- Stats Section -->
<div class="row text-center">
    <div class="col-md-3">
        <i class="bi bi-people-fill text-primary fs-1"></i>
        <h3 class="mt-2">10,000+</h3>
        <p class="text-muted">Happy Users</p>
    </div>
    <div class="col-md-3">
        <i class="bi bi-download text-success fs-1"></i>
        <h3 class="mt-2">50,000+</h3>
        <p class="text-muted">Downloads</p>
    </div>
    <div class="col-md-3">
        <i class="bi bi-star-fill text-warning fs-1"></i>
        <h3 class="mt-2">4.9/5</h3>
        <p class="text-muted">Rating</p>
    </div>
    <div class="col-md-3">
        <i class="bi bi-trophy-fill text-warning fs-1"></i>
        <h3 class="mt-2">15+</h3>
        <p class="text-muted">Awards Won</p>
    </div>
</div>

<!-- Navigation with Icons -->
<nav class="nav nav-pills nav-fill">
    <a class="nav-link active" href="#">
        <i class="bi bi-house-door"></i> Home
    </a>
    <a class="nav-link" href="#">
        <i class="bi bi-person"></i> Profile
    </a>
    <a class="nav-link" href="#">
        <i class="bi bi-gear"></i> Settings
    </a>
</nav>
        

Practice Exercise

Create a pricing comparison table with the following features:

Three pricing tiers (Basic, Pro, Enterprise)
Large icon at the top of each tier
Price with large, bold typography
Feature list with checkmark icons
Truncated feature descriptions
Call-to-action button with icon
Different colors for each tier

Common Mistakes:

Forgetting to include the Bootstrap Icons CSS file
Not using proper icon names (check the official documentation)
Poor icon-text alignment in flex containers
Using text-truncate without setting max-width
Overusing icons, which can clutter the interface