Carousel
Basic example
Here is a basic example of a carousel with three slides. We recommend using
<button>
elements, but you can also use
<a>
elements with role="button".
Indicators
You can add indicators to the carousel, alongside the previous/next controls. The indicators let users jump directly to a particular slide.
Captions
You can add captions to your slides with the
.carousel-caption
element within any
.carousel-item
.
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.
Crossfade
Add
.carousel-fade
to your carousel to animate slides with a fade transition instead of a slide.
Depending on your carousel content (e.g., text only slides), you may want to add
.bg-body
or some custom CSS to the
.carousel-items
for proper crossfading.
Autoplaying carousels
You can make your carousels autoplay on page load by setting the
ride
option to
carousel
. Autoplaying carousels automatically pause while hovered with the mouse.