Search code examples
twitter-bootstrapnotificationsbootstrap-4toastsnackbar

Bootstrap 4 snackbar / toast

I'm trying to create a snackbar / toast version with Bootstrap 4. I start with this tutorial from w3schools.

Updated: I was trying to implement a custom snackbar or toast for Bootstrap 4 but, right now, it isn't necessary beacause Bootstrap 4 includes this option from version 4.2 as @Zim says.

Solution

  • Bootstrap 4.2 now includes Toast notifications

    Here's an example:

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Title</strong>
    <small>5 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">
    Content... this is a toast message.
  </div>
</div>

    Demo

    More Bootstrap Toast layout/position examples:

    Stacked vertically: https://codeply.com/go/3ZvZa9b8Im
    Side-by-side: https://codeply.com/go/GFMde2ritI
    3x3 grid: https://codeply.com/go/lj8GTFjvuK