Bootstrap 4 Components

Carousel

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.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block img-fluid" src="jpg/sunset.jpg" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="jpg/sunset2.jpg" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="jpg/sunset3.jpg" alt="Third slide"> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="jpg/sunset4.jpg" alt="Third slide"> </div> </div> </div>

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

Previous/Next

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.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block img-fluid" src="jpg/sunset.jpg" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="jpg/sunset2.jpg" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="jpg/sunset3.jpg" alt="Third slide"> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="jpg/sunset4.jpg" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

Indicators

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.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> <li data-target="#carouselExampleIndicators" data-slide-to="3"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block img-fluid" src="jpg/sunset.jpg" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="jpg/sunset2.jpg" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="jpg/sunset3.jpg" alt="Third slide"> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="jpg/sunset4.jpg" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

Captions

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

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> <li data-target="#carouselExampleIndicators" data-slide-to="3"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img src="jpg/sunset.jpg" alt="First slide"> <div class="carousel-caption"> <h3>First Slide</h3> <p>A beautiful sunset on a beach</p> </div> </div> <div class="carousel-item"> <img src="jpg/sunset2.jpg" alt="Second slide"> <div class="carousel-caption"> <h3>Second Slide</h3> <p>Sunset with beautiful shades of Red</p> </div> </div> <div class="carousel-item"> <img src="jpg/sunset3.jpg" alt="Third slide"> <div class="carousel-caption"> <h3>Third Slide</h3> <p>Sun going down amidst the cloudy sky</p> </div> </div> <div class="carousel-item"> <img src="jpg/sunset4.jpg" alt="Third slide"> <div class="carousel-caption"> <h3>Fourth Slide</h3> <p>Sunset on a lake</p> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

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