Bootstrap Components Demo

This demo page showcases three essential Bootstrap components that can enhance your web application’s user experience:

  • Modals: Popup dialogs for important information or user actions
  • Tooltips: Small helper texts that appear when hovering over elements
  • Toasts: Non-intrusive notification messages

Each component has several variations to demonstrate different use cases. Click the buttons to see them in action!

Modals

Modals are dialog boxes/popups that display on top of the current page. They’re useful for displaying critical information, gathering user input, or confirming actions.

How to implement:
  1. Add a button with data-bs-toggle="modal" and data-bs-target="#modalId"
  2. Create a modal structure with the corresponding ID
  3. Initialize with JavaScript or rely on Bootstrap’s auto-initialization

Tooltips

Tooltips are small popups that appear when a user hovers over an element, providing additional information or context.

Tooltips can also be applied to other elements:

Hover over this link to see a tooltip, or hover over this icon.

How to implement:
  1. Add data-bs-toggle="tooltip" and title="Your tooltip text" to any element
  2. Optionally set data-bs-placement="top|right|bottom|left"
  3. Important: Tooltips must be initialized with JavaScript: new bootstrap.Tooltip(document.querySelector('#example'))

Toasts

Toasts are lightweight notifications designed to mimic push notifications. They appear temporarily and disappear automatically.

How to implement:
  1. Create a toast container (fixed position recommended)
  2. Add toast markup with role="alert" and aria-live="assertive"
  3. Use JavaScript to show/hide toasts: new bootstrap.Toast(document.querySelector('#myToast')).show()
  4. Customize position, autohide delay, and appearance

Combining Components

This example shows how to combine modals, tooltips, and toasts in a realistic use case: