Tag: Lesson 18: Using Bootstrap Icons & SVGs

  • Lesson 18: Using Bootstrap Icons & SVGs

    📌 Objective: Learn how to use Bootstrap Icons & SVGs to enhance your UI with vector graphics.


    🔹 1. Introduction to Bootstrap Icons & SVGs

    Icons and SVGs improve visual clarity and navigation. Bootstrap provides a free icon library with over 1,800+ icons.

    💡 Why Use Bootstrap Icons & SVGs?
    ✔️ Lightweight & Scalable – No pixelation on zoom.
    ✔️ Customizable with CSS – Change size, color, and effects.
    ✔️ Compatible with Bootstrap components – Works in buttons, navbars, alerts, etc.


    🔹 2. Using Bootstrap Icons

    Bootstrap Icons require a simple <i> tag with a class.

    Example: Adding a Bootstrap Icon

    html
    <i class="bi bi-house"></i> Home

    🔹 What happens?

    • The house icon appears next to the “Home” text.

    1️⃣ Using Bootstrap Icons in Buttons

    Icons inside buttons make them more interactive and visually appealing.

    Example: Button with an Icon

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

    🔹 What happens?

    • The download icon appears inside the button.

    2️⃣ Bootstrap Icons in Links & Navigation

    Example: Navbar with Icons

    html
    <nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#"><i class="bi bi-bootstrap"></i> My Website</a>
    <ul class="navbar-nav">
    <li class="nav-item">
    <a class="nav-link" href="#"><i class="bi bi-house"></i> Home</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#"><i class="bi bi-person"></i> Profile</a>
    </li>
    </ul>
    </nav>

    🔹 What happens?

    • The “Home” and “Profile” links include icons for clarity.

    3️⃣ Changing Icon Size & Color

    Icons can be styled with CSS.

    Example: Custom Icon Size & Color

    html
    <i class="bi bi-heart" style="font-size: 2rem; color: red;"></i>

    🔹 What happens?

    • The heart icon is larger and red.

    4️⃣ Animated Icons

    Bootstrap supports rotating and spinning icons.

    Example: Spinning Icon

    html
    <i class="bi bi-arrow-clockwise spin"></i>

    🔹 What happens?

    • The icon rotates continuously.

    🔹 3. Using SVGs in Bootstrap

    SVGs (Scalable Vector Graphics) are resolution-independent images.

    Example: Basic SVG

    html
    <svg width="50" height="50">
    <circle cx="25" cy="25" r="20" fill="blue" />
    </svg>

    🔹 What happens?

    • A blue circle appears inside the SVG container.

    1️⃣ Customizing SVGs with Bootstrap Classes

    SVGs can be styled using Bootstrap’s utility classes.

    Example: SVG with Bootstrap Colors

    html
    <svg class="text-success" width="50" height="50" fill="currentColor">
    <rect width="50" height="50"></rect>
    </svg>

    🔹 What happens?

    • The rectangle takes Bootstrap’s “success” (green) color.

    2️⃣ Using Bootstrap Icons as Inline SVGs

    Icons can be embedded as SVGs for customization.

    Example: Inline SVG Icon

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

    🔹 What happens?

    • The heart icon appears as an SVG.

    3️⃣ Resizing SVGs Dynamically

    Example: Responsive SVGs

    html
    <svg class="img-fluid" width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="blue"></circle>
    </svg>

    🔹 What happens?

    • The SVG resizes dynamically to fit the container.

    🔹 4. Combining Icons & SVGs in UI Components

    1️⃣ Icons in Alerts

    Example: Alert with an Icon

    html
    <div class="alert alert-warning">
    <i class="bi bi-exclamation-triangle"></i> Warning! Something went wrong.
    </div>

    🔹 What happens?

    • The warning icon appears inside the alert box.

    2️⃣ Icons in Form Inputs

    Example: Input Field with an Icon

    html
    <div class="input-group">
    <span class="input-group-text"><i class="bi bi-person"></i></span>
    <input type="text" class="form-control" placeholder="Username">
    </div>

    🔹 What happens?

    • The user icon appears inside the input field.

    3️⃣ Icons in Dropdowns

    Example: Dropdown with Icons

    html
    <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
    <i class="bi bi-menu-button"></i> Menu
    </button>
    <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#"><i class="bi bi-house"></i> Home</a></li>
    <li><a class="dropdown-item" href="#"><i class="bi bi-gear"></i> Settings</a></li>
    </ul>
    </div>

    🔹 What happens?

    • The dropdown options have icons next to them.

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of Bootstrap Icons & SVGs.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ What Bootstrap class is used to display an icon?
    a) .icon
    b) .bootstrap-icon
    c) .bi
    d) .svg-icon

    Correct Answer: c) .bi


    2️⃣ How can you change an icon’s size?
    a) font-size: 2rem;
    b) size: large;
    c) .icon-large
    d) .bi-xl

    Correct Answer: a) font-size: 2rem;


    📌 True or False

    3️⃣ Bootstrap Icons require an external font library.
    Answer: False (Bootstrap Icons are built-in.)

    4️⃣ SVGs can be resized dynamically using .img-fluid.
    Answer: True


    🎯 Practical Challenge

    ✅ Create a button with an icon (.bi-download) inside it.
    ✅ Add icons to a navigation menu (.bi-house, .bi-person).
    ✅ Design a Bootstrap alert box with an SVG warning icon.
    ✅ Post your solution in the discussion forum for feedback!


    🎓 Lesson Summary

    Bootstrap Icons (.bi) provide scalable, customizable vector graphics.
    Icons can be styled using CSS (font-size, color).
    SVGs are resolution-independent and can be customized with Bootstrap classes.
    Icons work in buttons, dropdowns, alerts, forms, and navigation.