Toasts and Scrollspy

Bootstrap Feedback Components: Toasts & Scrollspy

The Notification & Navigation Story 📬

Imagine you’re at a busy train station. There’s an announcement board that briefly shows messages like “Train arriving!” then fades away—that’s a Toast! And there’s a map that highlights where you are as you walk—that’s Scrollspy!

Bootstrap gives us these two magical helpers:

• Toasts = Temporary popup messages
• Scrollspy = “You are here” navigation highlighter

🍞 What Are Toasts?

Think of a toast like a sticky note that appears, shows you something important, then politely disappears. It doesn’t block you from doing other things!

Real Life Examples:

• “Message sent!” popup in apps
• “Item added to cart” notification
• “You have a new email” alert

Basic Toast Structure

<div class="toast" role="alert">
  <div class="toast-header">
    <strong>Notification</strong>
    <button type="button"
      class="btn-close"
      data-bs-dismiss="toast">
    </button>
  </div>
  <div class="toast-body">
    Hello! This is your message.
  </div>
</div>

Making Toasts Appear

// Get the toast element
const toast = document
  .getElementById('myToast');

// Create toast instance
const bsToast = new
  bootstrap.Toast(toast);

// Show it!
bsToast.show();

🥞 Toast Stacking

What if you have MANY notifications at once?

Imagine a stack of pancakes—each new pancake goes on top! That’s exactly how toast stacking works.

The Toast Container

<div class="toast-container">
  <!-- First toast (bottom) -->
  <div class="toast">
    <div class="toast-body">
      First message!
    </div>
  </div>

  <!-- Second toast (on top) -->
  <div class="toast">
    <div class="toast-body">
      Second message!
    </div>
  </div>
</div>

graph TD
    A["New Toast Arrives"] --> B["Goes to Top of Stack"]
    B --> C["Older toasts move down"]
    C --> D["Each toast can close independently"]

Key Point: Toasts stack automatically. Just put them in a container and Bootstrap handles the rest!

🎨 Toast Custom Content

Toasts aren’t just for text! You can put almost anything inside them.

Toast with Image

<div class="toast">
  <div class="toast-header">
    <img src="avatar.png"
      class="rounded me-2"
      width="20">
    <strong>John sent a photo</strong>
  </div>
  <div class="toast-body">
    Check out my vacation pics!
  </div>
</div>

Toast with Buttons

<div class="toast">
  <div class="toast-body">
    Accept friend request?
    <div class="mt-2">
      <button class="btn btn-primary
        btn-sm">Accept</button>
      <button class="btn btn-secondary
        btn-sm">Decline</button>
    </div>
  </div>
</div>

Toast with Progress

<div class="toast">
  <div class="toast-body">
    Uploading file...
    <div class="progress mt-2">
      <div class="progress-bar"
        style="width: 75%">
      </div>
    </div>
  </div>
</div>

🌈 Toast Color Schemes

Colors help users understand messages at a glance!

Example: Success Toast

<div class="toast bg-success
  text-white">
  <div class="toast-body">
    ✓ File saved successfully!
  </div>
</div>

Example: Error Toast

<div class="toast bg-danger
  text-white">
  <div class="toast-body">
    ✗ Connection failed.
    Try again.
  </div>
</div>

Example: Warning Toast

<div class="toast bg-warning
  text-dark">
  <div class="toast-body">
    ⚠ Battery low (10%)
  </div>
</div>

Pro Tip: Use text-white for dark backgrounds and text-dark for light ones!

📍 Toast Placement

Where should your toast appear? Bootstrap lets you put toasts anywhere!

The Magic: Position Classes

<div class="toast-container
  position-fixed
  top-0 end-0 p-3">
  <!-- Toast appears top-right -->
</div>

Placement Options

graph TD
    A["top-0 start-0"] --- B["top-0 end-0"]
    A --- C["bottom-0 start-0"]
    B --- D["bottom-0 end-0"]
    E["top-50 start-50"] --- F["Center of Screen"]

Complete Placement Example

<!-- Bottom-right corner -->
<div class="toast-container
  position-fixed
  bottom-0 end-0 p-3">

  <div class="toast">
    <div class="toast-body">
      I appear in the corner!
    </div>
  </div>
</div>

🔭 What is Scrollspy?

Scrollspy watches where you scroll and highlights the matching navigation link!

Imagine reading a book with a table of contents. As you read Chapter 3, the “Chapter 3” entry in the contents glows. That’s Scrollspy!

How It Works

graph TD
    A["User scrolls page"] --> B["Scrollspy detects position"]
    B --> C["Finds matching section"]
    C --> D["Highlights nav link"]
    D --> E["User knows where they are!"]

Basic Setup

<!-- Navigation -->
<nav id="navbar-example">
  <ul class="nav">
    <li><a href="#intro">Intro</a></li>
    <li><a href="#features">Features</a></li>
    <li><a href="#pricing">Pricing</a></li>
  </ul>
</nav>

<!-- Content with Scrollspy -->
<div data-bs-spy="scroll"
  data-bs-target="#navbar-example">

  <section id="intro">
    Welcome...
  </section>

  <section id="features">
    Our features...
  </section>

  <section id="pricing">
    Pricing plans...
  </section>
</div>

The Secret Sauce:

• data-bs-spy="scroll" = “Watch my scrolling!”
• data-bs-target="#navbar-example" = “Update THIS navigation”

🧭 Scrollspy Navbar

The most common use: highlighting menu items as you scroll through a page!

Complete Navbar Example

<nav class="navbar navbar-expand
  sticky-top bg-light"
  id="main-nav">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link"
        href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link"
        href="#about">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link"
        href="#contact">Contact</a>
    </li>
  </ul>
</nav>

<div data-bs-spy="scroll"
  data-bs-target="#main-nav"
  data-bs-smooth-scroll="true"
  tabindex="0">

  <section id="home">
    <h2>Home Section</h2>
    <p>Welcome to our site!</p>
  </section>

  <section id="about">
    <h2>About Section</h2>
    <p>Learn about us...</p>
  </section>

  <section id="contact">
    <h2>Contact Section</h2>
    <p>Get in touch...</p>
  </section>
</div>

What Happens:

1. User scrolls to “About Section”
2. The “About” link gets .active class
3. Link changes appearance (highlighted!)
4. User always knows their location

📋 Scrollspy List Group

Not using a navbar? Use a list group instead!

List groups are perfect for sidebar navigation—like a table of contents.

Sidebar Scrollspy Example

<div class="row">
  <!-- Sidebar Navigation -->
  <div class="col-4">
    <div id="list-example"
      class="list-group">
      <a class="list-group-item
        list-group-item-action"
        href="#list-item-1">
        Chapter 1
      </a>
      <a class="list-group-item
        list-group-item-action"
        href="#list-item-2">
        Chapter 2
      </a>
      <a class="list-group-item
        list-group-item-action"
        href="#list-item-3">
        Chapter 3
      </a>
    </div>
  </div>

  <!-- Scrollable Content -->
  <div class="col-8">
    <div data-bs-spy="scroll"
      data-bs-target="#list-example"
      data-bs-offset="0"
      tabindex="0">

      <h4 id="list-item-1">
        Chapter 1
      </h4>
      <p>Once upon a time...</p>

      <h4 id="list-item-2">
        Chapter 2
      </h4>
      <p>The adventure begins...</p>

      <h4 id="list-item-3">
        Chapter 3
      </h4>
      <p>The exciting conclusion...</p>
    </div>
  </div>
</div>

Important Attributes

🎯 Quick Summary

Toasts = Temporary Messages

• Pop up, show info, disappear
• Can stack multiple toasts
• Customize with images, buttons, colors
• Place anywhere on screen

Scrollspy = Navigation Tracker

• Watches scroll position
• Highlights matching nav links
• Works with navbars and list groups
• Helps users know their location

🚀 Pro Tips

1. Toast Timing: Default is 5 seconds. Change with data-bs-delay="3000" (3 seconds)

2. Toast Autohide: Turn off with data-bs-autohide="false"

3. Scrollspy Offset: If using a fixed navbar, set data-bs-offset to match navbar height

4. Scrollspy Refresh: Call bootstrap.ScrollSpy.getInstance(element).refresh() if content changes dynamically

You did it! 🎉

Now you understand how to create popup notifications with Toasts and smart navigation highlighting with Scrollspy. These two tools make your websites feel alive and user-friendly!