All about toasts in bootstrap 4

What is a Toast?

Definition

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.

Technical Definition

A flexbox div with fixed positioning  which initially is not displayed on the page and is only triggered when a .toast() method is fired at a particular event may it be on page load or some click,scroll etc events.

When to use it?

Toasts can be used for multiple events on a webpage. Its main purpose is to grab users attention for a moment’s time to show a piece of data website intends to show.

Some Scenarios

  • If a website is an online store and a customer purchased a product from it you can show the message “Order placed” using toast.
  • If you own a social website, and a particular user is logged in and one of his friends come online, this toast can be used to notify the user that “your friend XYZ is now online”.
  • Another good example is on an elearning site, an instructor adds a student to a specific course and student who is logged in at the same time gets a notification saying ”Good new! You are now enrolled to course XYZ by instructor ABC”.
  • There are many more such use cases and this toast component can be good add on to the site.

 

Toasts Provided by Bootstrap 4

What is bootstrap 4, you ask?

Before going further and looking at what a toast looks and works like in bootstrap 4, you need to know what is bootstrap is and how it work

According to official site definition,

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

What you read above was mostly technical terms and you might not be familiar with that stuff now. Let me simplify it,

Bootstrap is a css framework which provides you a library of readymade components and styling utilities which save a lot of initial effort for a developer and can use them to develop websites with great efficiency.

Better isn’t it?

If you are more interested and want to explore more, you can go to the official documentation from here.

Now back to our topic…

How do i use a toast?

The basic usage is fairly simple. Your project will have an html file where you will add the structuring for a toast and a js file where you will initialize a toast on some event.

Paste the html in your html file where you want to show it.

Html:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 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">
    Hello, world! This is a toast message.
  </div>
</div>

And now the js in your js file which is linked to your html file or in paste it at the end of html file above  </body> tag inside <script>…</script> tag.

The basic initializing code is:

$(‘.toast’).toast(options)

 

But if you want to trigger it on some event then you can do something like this:

$(selector).click(function(){

$(‘.toast’).toast(options)

})

Here is a doc which provides all the events where you can trigger a toast.

 

Toast features

Translucent: The toast displayed will be slightly see through yet readable.

Stacking: If the user recieves notification,then multiple toasts elegantly stacks one below another.

Placement: You have freedom of placement when you are using bootstrap toast.

 

You can use place using the following techniques:

  • Absolute positioning
  • Flex box

When using absolute positioning, the syntax is as follows

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

<your bootstrap toast component>

  </div>

</div>

 

When using absolute positioning, it’s important that the outermost container should have the relative position outside of which you don’t want to position the toast. Then you can add style attribute and add the styles like position:absolute and add top, left, right and bottom.

Alternatively, you can also use fixed positioning the same way and keep the toast fixed to screen so that toast will be persistent while user scrolls down or up through the website.

 

Toast Ui options

So there are option of how you want to show the toast on your frontend. The following are the available options:

  • Animation: You can add a nice warm fade away animation while displaying toasts.
  • Autohide: you can if you want to hide the toasts automatically
  • Delay: if you want to decide when the toasts showuld disappear you can use this property.

All you have to do is add a data attribute (data-) with a boolean value like shown below:

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false" data-animation="true" data-delay=600  >

Toast method options

Toasts provides 3 options to handle toast functionality:

  • Show : shows the toast on the webpage with additional hook events for show
  • Hide : hides the toast on the webpage with additional hook events for hide
  • Dispose: just hides the toast and the component is not removed from the dom.

 

Syntax:

$('#element').toast('hide')

 

There are also additional hook events which can be used if you want to add additional functionalities before and after display events. Its as follows:

  • Show.bs.toast : when the show instance method is called
  • Shown.bs.toast: when the toast is shown on to the webpage
  • Hide.bs.toast: when the hide instance method is called
  • Hidden.bs.toast: when the toast is hidden on to the webpage

Syntax:

$('#myToast').on('hidden.bs.toast', function () {
  // do something…
})

 

Hope you guys learned something new. If you have any queries/suggestions let me know in the comment section below!

25
25