Bootstrap 4 Components


Carousel is a slideshow of contents like images, text or custom markup that cycle through, sliding in, pausing and then sliding out one after the other. It includes controls that enable the user to scroll the content backward or forward.

So let’s create a carousel with slides only. With no controls or indicators. The images only slide after one another.

Let’s see how it’s done.

Create an outer container with a <div> element with classes .carousel and .slide and give it an id. Now include all the carousel items, in this case, images, inside the container with each having a class .carousel-item. Now wrap all these carousel items inside another <div> element within the container with class .carousel-inner.

Add the class .active to one of the carousel items. This marks the initial slide of the carousel. If this class is not applied carousel will not be visible.

This should create a simple carousel with images sliding out one after the other.

Note: .d-block and .img-fluid on carousel images to prevent the browser default image alignment.


Now, let’s create a carousel with controls in which we can scroll our carousel items back and forth.

Use an <a> element for the “previous”  or “next” controls. For “previous” button use classes .carousel-control-prev and for the “next” button use class .carousel-control-next.


Now we can add the indicators for the carousel.

For adding the indicators we need an ordered list <ol> with class .carousel-indicators and list items with attributes data-target and data-slide-to.


Now let’s add captions to the images. You can add captions to the images using the class .carousel-caption inside each carousel item.

Note: Captions can be hidden on smaller viewports by adding BootStrap 4 display utility classes.