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.
Build carousels - Bootstrap Tutorial
From the course: Bootstrap 4 Essential Training
Build carousels
in Bootstrap so let's take a look at how that works. Now, first up, to setup carousel you create a container div and you give it a class of carousel. Now, in there, you can also add a class of slide. What that does is set up the carousel items so that they move from right to left and they slide in. If you also add a class of carousel-fade, with a carousel-inner class. It can be something other than a div but generally it's a div, and that sets up the area that is going to have all of your images. Now inside that, each image should go in another container, usually a div with a class of carousel-item and if you have a lot of images, by default, the first image is the one that is going to show but if you want some other image to show first then you just give it a class of active and as each new image comes into view, it will get also a class of active. Now the images go inside this carousel-item div or container and they usually get a class of d-block and w-100. That's display block and…
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)
-