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.
