Slides only
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators. The following exmaple demonstrates carousel with slides only. Note the presence of the .d-block and .w-100 on carousel images to prevent browser default image alignment. In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.)
With controls
Adding in the previous and next controls. We recommend using <button> elements, but you can also use <a> elements with role="button". Be sure to set a unique id on the .carousel for optional controls, especially if you’re using multiple carousels on a single page. Control and indicator elements must have a data-bs-target attribute (or href for links) that matches the id of the .carousel element.
With indicators
You can also add the indicators to the carousel, alongside the controls, too. Indicators are small rectangles displayed at the bottom of the carousel to visually indicate the number of slides in the carousel. Be sure to include carousel id in data-bs-target and link slides in data-bs-slide-to attributes. Indicators can also work without prev and next navigation buttons.
With captions
Add captions to your slides easily with the .carousel-caption element within any .carousel-item. They can be easily hidden on smaller viewports, as shown below, with optional display utilities. We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block.
First slide label
Some representative placeholder content for the first slide.
Second slide label
Some representative placeholder content for the second slide.
Third slide label
Some representative placeholder content for the third slide.
Fourth slide label
Some representative placeholder content for the fourth slide.
With multiple items
You can have up to 12 items per slide with the help of our grid system. Carousel itself doesn't require any modifications, just use .row and .col-* containers inside each .carousel-item to show multiple images. You can also mix them and show different number of images per slide, but keep in mind that the height of carousel can jump.
Dark variant
Add .carousel-dark to the .carousel for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the filter CSS property. Captions and controls have additional Sass variables that customize the color and background-color.
Disable touch swiping
Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled using the data-bs-touch attribute. The example below also does not include the data-bs-ride attribute and has data-bs-interval="false" so it doesn’t autoplay.
