Toasts

A Toast is a small, lightweight notification meant to pop in briefly, tell the user something happened, and then go away — think "Saved!" messages. Toasts were added in Bootstrap 4.2, later than the rest of this section. We'll build a "Trail saved to favorites" toast for TrailMap.

Toast Structure

A toast is a .toast element containing a .toast-header (icon, title, timestamp, close button) and a .toast-body with the message.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">TrailMap</strong>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">
      <span>&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Message goes here.
  </div>
</div>

Why Toasts Need JS to Show

Unlike Modal or Collapse, there's no click-driven data-toggle attribute for toasts — nothing on the page is naturally "clicked" to trigger a background save confirmation. A toast starts hidden and always needs a jQuery call to display it: .toast('show').

// Show a toast in response to some action, e.g. after saving a favorite
$('#favoriteToast').toast('show');

Toast Options: data-autohide and data-delay

data-autohide (default "true") controls whether the toast disappears on its own; set it to "false" to require a manual close. data-delay sets how many milliseconds it stays visible before auto-hiding (default 500).

<div class="toast" data-autohide="true" data-delay="3000"> ... </div>

Worked Example: TrailMap "Trail Saved to Favorites" Toast

When a hiker taps the star icon on a trail card, TrailMap shows a toast in the corner confirming the save, then hides it automatically after 3 seconds.

<div class="toast" id="favoriteToast" data-autohide="true" data-delay="3000"
  role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <i class="fa fa-star text-warning mr-2"></i>
    <strong class="mr-auto">TrailMap</strong>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">
      <span>&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Ridgeline Loop saved to favorites.
  </div>
</div>

// Fired when the hiker clicks the star icon on a trail card
$('.favorite-star').on('click', function() {
  $('#favoriteToast').toast('show');
});