Bootstrap - Toasts: A Friendly Guide for Beginners

Hello there, future web developers! Today, we're going to dive into the wonderful world of Bootstrap Toasts. Don't worry if you've never heard of them before – by the end of this tutorial, you'll be toasting like a pro! ?

Bootstrap - Toasts

What are Bootstrap Toasts?

Before we jump in, let's talk about what Toasts are. Imagine you're using a mobile app, and suddenly a small notification pops up at the bottom of your screen. That's essentially what a Toast is in web development! It's a lightweight notification designed to mimic the push notifications that we see on mobile devices.

Basic Toast

Let's start with a basic Toast. Here's what it looks like in code:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a Toast message.
  </div>
</div>

Let's break this down:

The outer div with class toast is our main container.
Inside, we have a toast-header and a toast-body.
The header typically contains an image, a title, a timestamp, and a close button.
The body is where our main message goes.

Live Toast

Now, let's make our Toast come alive! To do this, we need a little JavaScript:

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<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">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, World! This is a live toast message.
    </div>
  </div>
</div>

<script>
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)
    toast.show()
  })
}
</script>

Here, we've added a button that, when clicked, will show our Toast. The JavaScript at the bottom listens for the click and then shows the Toast.

Translucent Toast

Want to make your Toast a bit see-through? Just add the bg-light class:

<div class="toast bg-light" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, World! This is a translucent toast.
  </div>
</div>

Stacking Toasts

What if you want to show multiple Toasts? No problem! Bootstrap will stack them neatly:

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      See? Just like this.
    </div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Custom Content

Toasts aren't limited to just text. You can add any HTML content you like:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Here, we've added buttons to our Toast body. Get creative!

Color Schemes

Toasts can come in different colors to match your site's theme or to indicate different types of messages:

<div class="toast bg-primary text-white" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a primary toast.
  </div>
</div>

You can replace bg-primary with bg-success, bg-danger, bg-warning, etc.

Placement of Toasts

Toasts can be placed anywhere on your page. Here's how to place it in the top-right corner:

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <div class="toast-container position-absolute top-0 end-0 p-3">
    <!-- Your toast here -->
  </div>
</div>

Accessibility

Accessibility is crucial! Always include role="alert" and aria-live="assertive" attributes to ensure screen readers can announce your Toasts properly.

Here's a table summarizing the key Toast methods:

Method	Description
show()	Shows the Toast
hide()	Hides the Toast
dispose()	Hides the Toast and removes it from the DOM

And that's it! You're now a Toast master. Remember, practice makes perfect, so try incorporating these into your next project. Happy coding! ?

Credits: Image by storyset