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.
