From the course: Bootstrap 4 Essential Training
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Toasts - Bootstrap Tutorial
From the course: Bootstrap 4 Essential Training
Toasts
- [Instructor] Toasts are notification-style boxes that you see in desktop and mobile operating systems. And to create them in Bootstrap, we have to create a container with a class of toasts. And inside that we usually put some data attributes, and we'll cover them in just a minute. And inside that you want to add one of two items, a toast header that has usually a header title for the toast and then a toast body, should be a pretty simple thing, you don't want to make these have too much content in them. In the toast header is usually also where you put something that will be able to close the toast as well. And then the data attributes that you can add on the main container, you can set the data animation attribute to true or false, it's on by default. So if you want to turn off the default fade animation that toasts have, you can just set data animation to false. Also the toast will automatically hide after a few…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
-
-
(Locked)
Interactive component overview1m 24s
-
(Locked)
Add tooltips7m 21s
-
(Locked)
Display popovers5m 20s
-
(Locked)
Create alerts4m 14s
-
(Locked)
Use dropdowns8m 15s
-
(Locked)
Add collapse accordions12m
-
(Locked)
Use modals12m 3s
-
(Locked)
Build carousels13m 37s
-
(Locked)
Use scrollspy6m 56s
-
(Locked)
Toasts6m 10s
-
(Locked)
Spinners5m 34s
-
(Locked)
Pagination3m 21s
-
(Locked)
Stretched links3m 11s
-
(Locked)
Embeds3m 9s
-
(Locked)
-