Bootstrap 4 Carousel

Add scrolling images or text to your website with the Bootstrap carousel component.

The Bootstrap carousel component enables you to add scrolling images and text that slide in, pause, then slide out. Controls enable the user to scroll forwards or backwards within the set. Basically a scrolling marquee with user controls.

Explanation

To create a basic carousel:

Add Controls

To add "Previous/Next" controls, use an <a> with .carousel-control-prev or carousel-control-next. Also add a <span> with .carousel-control-prev-icon or .carousel-control-next-icon.

To cater for screenreaders, add <span>s with the words "Previous" or "Next" and give them the .sr-only class. This will hide this text from browsers, but read out the text in screenreaders.

Add Indicators

To add "indicator" controls (the little clickable areas at the bottom, center), add a list with .carousel-indicators, as well as the applicable .data-target and .data-slide-to attributes.

Captions

You can add captions to your slideshow by adding a <div> with the .carousel-caption class applied. This goes inside each .carousel-item.

Bootstrap 4 vs Bootstrap 3

Bootstrap 3 uses .item for each carousel item.

Bootstrap 4 uses .carousel-item for each carousel item.

Alpha Release

Bootstrap 4 is currently in alpha release, therefore, do not use it in production yet. To be safe, refer to Bootstrap 3 Carousel until Bootstrap 4 becomes an official release.

Also check out the differences between Bootstrap v3 and v4.