Why the default carousel shows only one item
Bootstrap’s carousel treats every `.carousel-item` as a single slide. When you place a card inside that element, the slide width equals the container width, so only one card is visible. To show several cards, the slide must contain a row of columns that each hold a card, and the slide itself must be a flex container so the columns stay side‑by‑side.
Markup: Wrap cards in a row inside each slide
Place a Bootstrap row inside every `.carousel-item` and give each card a column class that adds up to 12. For three cards per slide use `.col-12 .col-md-4`. The row provides the gutter and the column classes handle the responsive breakpoints.
```html <div id="multiCardCarousel" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="row g-3"> <div class="col-12 col-md-4"> <div class="card h-100">…</div> </div> <div class="col-12 col-md-4"> <div class="card h-100">…</div> </div> <div class="col-12 col-md-4"> <div class="card h-100">…</div> </div> </div> </div> <!-- repeat .carousel-item for the next slide --> </div> <button class="carousel-control-prev" type="button" data-bs-target="#multiCardCarousel" data-bs-slide="prev"> <span class="carousel-control-prev-icon"></span> </button> <button class="carousel-control-next" type="button" data-bs-target="#multiCardCarousel" data-bs-slide="next"> <span class="carousel-control-next-icon"></span> </button> </div> ```
CSS: Turn the slide into a flex container
Bootstrap already sets `.carousel-item` to `display: block`. Overriding it with `display: flex` makes the inner row stretch to the full height of the slide, keeping the cards aligned vertically. Adding `align-items: stretch` ensures each card fills the column height.
```css .carousel-inner .carousel-item { display: flex; align-items: stretch; }
.carousel-inner .carousel-item .row { flex: 1 0 100%; } ```
.carousel-inner .carousel-item {
display: flex;
align-items: stretch;
}
.carousel-inner .carousel-item .row {
flex: 1 0 100%;
}Making the carousel loop with multiple items
The default carousel moves one `.carousel-item` at a time, which is fine when each slide already contains three cards. If you want a smoother “slide‑by‑one‑card” effect, duplicate the first few cards at the end of the list and use a small JavaScript snippet to shift the items after each transition. For most cases, the simple three‑card‑per‑slide approach described above is sufficient and does not require extra JS.
Full working example (Bootstrap 5 only)
Below is a minimal page that includes the CDN links, the HTML structure, and the custom CSS. Open it in a browser and you’ll see three cards per slide, responsive down to a single column on small screens.
```html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 5 Multi‑Card Carousel</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <style> .carousel-inner .carousel-item {display:flex;align-items:stretch;} .carousel-inner .carousel-item .row {flex:1 0 100%;} </style> </head> <body class="p-4"> <div id="multiCardCarousel" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="row g-3"> <div class="col-12 col-md-4"><div class="card h-100"><div class="card-body">Card 1</div></div></div> <div class="col-12 col-md-4"><div class="card h-100"><div class="card-body">Card 2</div></div></div> <div class="col-12 col-md-4"><div class="card h-100"><div class="card-body">Card 3</div></div></div> </div> </div> <div class="carousel-item"> <div class="row g-3"> <div class="col-12 col-md-4"><div class="card h-100"><div class="card-body">Card 4</div></div></div> <div class="col-12 col-md-4"><div class="card h-100"><div class="card-body">Card 5</div></div></div> <div class="col-12 col-md-4"><div class="card h-100"><div class="card-body">Card 6</div></div></div> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#multiCardCarousel" data-bs-slide="prev"> <span class="carousel-control-prev-icon"></span> </button> <button class="carousel-control-next" type="button" data-bs-target="#multiCardCarousel" data-bs-slide="next"> <span class="carousel-control-next-icon"></span> </button> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html> ```
Takeaway: Wrap cards in a Bootstrap row inside each `.carousel-item` and turn the slide into a flex container to display three cards per slide.
People also ask
Can I mix Bootstrap 4 and Bootstrap 5 on the same page?
No. The two versions use different class names and CSS variables, which cause conflicts; choose one version and stick with it.
Do I need extra JavaScript to show multiple cards per slide?
Only if you want a “slide‑by‑one‑card” effect. For a static three‑card‑per‑slide carousel, the built‑in Bootstrap JS is enough.
How do I make the carousel responsive on mobile devices?
Use responsive column classes (e.g., `col-12 col-md-4`). On screens smaller than the `md` breakpoint each card will take the full width, showing one per slide.
Inspired by a public discussion on Stack Overflow. This article is an original explanation for learners.