Bootstrap 5 carousels are slideshow components for cycling through images, cards or custom content. This page covers 4 carousel patterns — image, fade, card and auto-play — each with working copy-paste HTML.

Quick Setup

Carousels require Bootstrap 5 JS bundle:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Key Classes Reference

ClassWhat It Does
.carouselRequired wrapper element
.carousel-innerContainer for all slides
.carousel-itemEach individual slide
.carousel-item.activeThe currently visible slide
.carousel-fadeCrossfade instead of slide transition
.carousel-indicatorsDot indicators at the bottom
.carousel-control-prevPrevious button
.carousel-control-nextNext button
.carousel-captionText overlay on image slides
data-bs-ride="carousel"Enables auto-play
data-bs-interval="3000"Sets slide delay in milliseconds

1. Basic Bootstrap 5 Image Carousel

A standard image carousel with prev/next controls and indicator dots.

2. Bootstrap 5 Fade Carousel

Smooth crossfade transition between slides using carousel-fade instead of the default slide.

3. Bootstrap 5 Card Carousel

A carousel displaying multiple cards per slide. Great for testimonials and product showcases.

4. Bootstrap 5 Auto-Play Carousel

Carousel that auto-advances every 3 seconds using data-bs-ride and data-bs-interval.

Frequently Asked Questions

Remove data-bs-ride='carousel' from the carousel element. Or stop it with JavaScript: const carousel = bootstrap.Carousel.getInstance(document.getElementById('myCarousel')); carousel.pause(). To prevent auto-start on hover set data-bs-pause='false'.
Set data-bs-interval on each carousel-item to control how long each slide shows in milliseconds: data-bs-interval='5000' for 5 seconds. To change the transition animation speed override the CSS: .carousel-item { transition-duration: 0.8s; }
Put a Bootstrap row with multiple columns inside each carousel-item. Use col-md-4 for 3 items per slide. This is a CSS-based approach — Bootstrap doesn't have a native multi-item carousel. For smooth multi-item sliding use a library like Swiper.js.
Bootstrap 5 carousel supports touch swipe on mobile by default. No extra configuration needed. To disable touch swiping add data-bs-touch='false' to the carousel element.
Each indicator button needs data-bs-target pointing to the carousel ID and data-bs-slide-to with the slide index (0-based): <button data-bs-target='#myCarousel' data-bs-slide-to='0' class='active'></button>. The active class marks the default visible slide.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →

Use code FIRST30 for 30% off your first purchase.

Related Components

Bootstrap 5 Card Example

View examples →

Bootstrap 5 Hero Section

View examples →

Bootstrap 5 Modal Example

View examples →