• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Toast

← Previous Next →

Toasts in Bootstrap 4 are small, temporary notifications that appear on the screen to provide feedback or updates to users. They are lightweight, unobtrusive, and designed to appear without interrupting the user’s workflow. Unlike modals, which require user interaction, toasts are ideal for short messages such as success alerts, error messages, status updates, or tips.

Basic Toast Structure

A toast consists of a container with the class toast. Inside, there is usually a header and a body. The header may include a title, timestamp, and close button, while the body contains the main message.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Notification</strong>
    <small class="text-muted">Just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Your form has been successfully submitted!
  </div>
</div>

  • toast-header contains the heading, optional timestamp, and close button.

  • toast-body contains the message or content.

  • role="alert" and aria-live="assertive" ensure the message is announced by screen readers.

Displaying Toasts

Toasts require JavaScript to be displayed. You can show or hide them manually using jQuery.

$('.toast').toast('show')

  • toast('show') makes the toast visible.

  • toast('hide') hides it programmatically.

  • Manual control allows developers to display notifications at precise moments, like after form submission or an API response.

Auto-Dismiss and Delay

Toasts can be set to automatically disappear after a specific duration using the data-delay attribute or JavaScript options.

<div class="toast" data-delay="5000">
  ...
</div>

$('.toast').toast({
  autohide: true,
  delay: 5000
})

  • autohide ensures the toast disappears automatically.

  • delay specifies how long the toast remains visible, measured in milliseconds.

  • Auto-dismissed toasts enhance usability by providing feedback without requiring user interaction.

Placement and Stacking

Toasts can be positioned anywhere on the screen using a container with fixed positioning. The top-right corner is commonly used, but toasts can also appear in top-left, bottom-right, or bottom-left.

<div aria-live="polite" aria-atomic="true" style="position: fixed; top: 1rem; right: 1rem;">
  <div class="toast" data-delay="4000">
    ...
  </div>
  <div class="toast" data-delay="5000">
    Another message
  </div>
</div>

  • Multiple toasts can be stacked, appearing one after another.

  • Proper spacing ensures they do not overlap or obscure content.

  • Fixed positioning keeps toasts visible even when scrolling.

Toast Options

Bootstrap 4 provides several options for controlling toast behavior:

  • animation – enables or disables fade-in and fade-out effects.

  • autohide – whether the toast disappears automatically.

  • delay – time in milliseconds before hiding the toast.

  • container – determines the element to append the toast, useful for layout control.

$('.toast').toast({
  animation: true,
  autohide: true,
  delay: 3000,
  container: 'body'
})

  • These options provide flexibility for notifications depending on the context.

  • Animations make notifications smoother and more visually appealing.

Toast with Icons or Images

Toasts can include icons, images, or other elements for better clarity and visual appeal.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="icon.png" class="rounded mr-2" alt="Icon" style="width:20px;height:20px;">
    <strong class="mr-auto">Update</strong>
    <small class="text-muted">2 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Your profile picture has been updated successfully.
  </div>
</div>

  • Icons or images help users quickly identify the type of notification, such as success, warning, or error.

  • Keep visuals small to maintain a compact design.

Accessibility Considerations

  • Use role="alert" and aria-live="assertive" to ensure messages are announced by screen readers.

  • Keep toast messages concise for easy comprehension.

  • Make close buttons accessible via keyboard navigation.

  • Avoid placing critical information solely in toasts, as they may disappear before the user notices.

Real-World Use Cases

  • Displaying success messages after form submission.

  • Showing error alerts or validation messages without blocking interaction.

  • Providing status updates in dashboards or admin panels.

  • Showing timed reminders or tips for web applications.

  • Indicating background task completion or notifications in real-time apps.

Best Practices

  • Keep messages short and actionable.

  • Use consistent placement and stacking for a predictable experience.

  • Avoid overloading the user with too many simultaneous toasts.

  • Combine color codes, icons, and typography for better recognition.

  • Test responsiveness and visibility across different screen sizes and devices.

Summary of the Tutorial

This tutorial covered Bootstrap 4 toasts and their usage. You learned:

  • How to structure a toast with a header, body, and optional close button.

  • Displaying toasts manually or automatically using JavaScript and data-delay.

  • Controlling placement and stacking multiple toasts on the screen.

  • Configuring toast options like autohide, delay, animation, and container.

  • Adding icons or images to enhance visual recognition.

  • Accessibility considerations for screen readers and keyboard users.

  • Real-world use cases and best practices for notifications.

Bootstrap 4 toasts provide a flexible, lightweight way to deliver notifications without disrupting the user experience. Properly implemented, they enhance interactivity, feedback, and user engagement while maintaining a clean interface.

Practice Questions

  1. Create a basic toast with a header and body that appears on page load.

  2. Build a toast that auto-dismisses after 5 seconds using data-delay.

  3. Add a toast with a close button that can be manually dismissed.

  4. Create a toast in the top-right corner and stack two toasts together.

  5. Build a toast with an icon in the header representing success.

  6. Create a toast that shows a timestamp of when the notification appeared.

  7. Build a toast with custom background color and text color using Bootstrap classes.

  8. Create a toast that appears on clicking a button instead of automatically.

  9. Add multiple toasts in a fixed container and ensure they do not overlap.

  10. Build a toast with fade-in animation and a delay of 3 seconds before auto-hiding.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top