Bootstrap 4 Carousel

Bootstrap 4 offers a carousel component, which is also known as a slider or slideshow. The carousel is used for the dynamic representation of content using images with some text. It is used to represent a large amount of content by occupying less amount of space

Steps for creating a Carousel

  • Add .carousel class along with the .slide class to the <div> element to create a carousel layout. The .slide class adds the CSS animation and transition effect
  • Add .carousel-indicators class to the <div> element to add indicators to the carousel.
  • Add .carousel-inner class to the <div> element to add slides to the carousel.
  • Add .carousel-item class to the <div> element for specifying content of each element.
  • Add .carousel-control-prev class to the <a> element for adding previous button to the carousel.
  • Add .carousel-control-next class to the <a> element for adding next button to the carousel.
  • Add .carousel-control-prev-icon class to the <span> element which is used with .carousel-control-prev class to add the previous button icon.
  • Add .carousel-control-next-icon class to the <span> element which is used with .carousel-control-prev class to add the next button icon.

Example

Output

Bootstrap 4 Carousel

Add Captions to the Slides – Bootstrap 4 also allows you to add the text or caption to your slide.

Steps for creating Captions with the Slide

Add .carousel-caption class to the <div> element to add the caption to each slide. This class is used within the .carousel-class-item class.

Example

Output

Carousel using JavaScript – You can activate the carousel manually using JavaScript.   

Example

Output

Bootstrap 4 Carousel


Pin It on Pinterest

Share This