Tooltips, Toast, Scrollspy, Offcanvas, Utilities, Dark Mode & Flex

Tooltips show tiny hints on hover or focus. Popovers show larger content with a title. Both need Bootstrap JS and initialization: new bootstrap.Tooltip(element) or data-bs-toggle="tooltip".

Tooltip & Popover

Tooltips show tiny hints on hover or focus. Popovers show larger content with a title. Both need Bootstrap JS and initialization: new bootstrap.Tooltip(element) or data-bs-toggle="tooltip".

Real-life example: A tooltip is a whispered hint ("Save file"). A popover is a small note card with a title and paragraph.

Tooltip and popover attributes

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard">
  Hover me
</button>

<button type="button" class="btn btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="Extra details appear here.">
  Popover
</button>

<script>
  const tips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
  tips.forEach((el) => new bootstrap.Tooltip(el));
</script>

Toast

Toasts are lightweight alert messages that float on screen — great for "Saved!" feedback. Use .toast with .toast-header and .toast-body inside a .toast-container.

Real-life example: A toast is like a short WhatsApp notification — appears briefly in the corner, then disappears.

Toast notification

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Rishtaara</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">Lesson marked complete!</div>
  </div>
</div>

Scrollspy

Scrollspy highlights nav links based on scroll position. Add data-bs-spy="scroll" to body (or a wrapper) and data-bs-target to the nav. Sections need ids matching href.

Real-life example: Scrollspy is like a textbook index that glows on the current chapter as you read down the page.

Scrollspy on body

<body data-bs-spy="scroll" data-bs-target="#lessonNav" data-bs-smooth-scroll="true" tabindex="0">
  <nav id="lessonNav" class="navbar fixed-top bg-light">
    <ul class="nav">
      <li class="nav-item"><a class="nav-link" href="#part1">Part 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#part2">Part 2</a></li>
    </ul>
  </nav>
  <div id="part1" class="container pt-5" style="height: 800px"><h2>Part 1</h2></div>
  <div id="part2" class="container" style="height: 800px"><h2>Part 2</h2></div>
</body>

Offcanvas

Offcanvas panels slide in from the edge — common for mobile menus or shopping carts. Use .offcanvas with .offcanvas-start/end/top/bottom.

Real-life example: Offcanvas is like a drawer that slides from the side of your desk — the main desk stays put.

Offcanvas menu

<button class="btn btn-dark" data-bs-toggle="offcanvas" data-bs-target="#sideMenu">Menu</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="sideMenu">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Navigation</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <a href="#" class="d-block mb-2">Home</a>
    <a href="#" class="d-block">Courses</a>
  </div>
</div>

Utilities

Bootstrap utilities are single-purpose classes: spacing (m-*, p-*), display (d-flex, d-none), sizing (w-100), borders, shadows (shadow), and position (position-fixed).

Real-life example: Utilities are like LEGO single bricks — one class, one job. Stack them to build layout without writing CSS files.

Common utilities

<div class="d-flex justify-content-between align-items-center p-3 mb-4 bg-light border rounded shadow-sm">
  <span class="fw-bold">Utilities demo</span>
  <span class="badge text-bg-primary">New</span>
</div>

Dark Mode

Bootstrap 5.3+ supports color modes. Add data-bs-theme="dark" on <html> or any element to switch to dark palette. Use .bg-body and .text-body for theme-aware colors.

Real-life example: Dark mode is like turning off the bright classroom lights for a cinema — same room, different mood, easier on the eyes at night.

Dark theme on html

<html lang="en" data-bs-theme="dark">
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <div class="container py-4">
    <h1 class="text-body">Dark mode page</h1>
    <p class="text-body-secondary">Colors adapt automatically.</p>
    <button class="btn btn-primary">Primary button</button>
  </div>
</body>
</html>

Flex

Flex utilities live on any element with .d-flex. Control direction (.flex-row, .flex-column), alignment (.justify-content-center, .align-items-center), and wrapping (.flex-wrap).

Real-life example: Flex is like arranging students in a line — row for side-by-side, column for a queue, justify-content to spread them evenly.

Flex centering

<div class="d-flex justify-content-center align-items-center bg-light" style="height: 200px;">
  <div class="p-4 bg-primary text-white rounded">Centered box</div>
</div>

<div class="d-flex flex-column flex-md-row gap-3 mt-3">
  <div class="p-3 bg-secondary text-white flex-fill">Box A</div>
  <div class="p-3 bg-secondary text-white flex-fill">Box B</div>
</div>