Carousel
A carousel is like a slideshow: it flips through a few pictures or cards on its own, or when you tap the arrows on the sides.
In this page:
Syntax
<div id="carousel-id" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button data-bs-target="#carousel-id" data-bs-slide-to="0" class="active"></button>
<button data-bs-target="#carousel-id" data-bs-slide-to="1"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">slide content</div>
<div class="carousel-item">slide content</div>
</div>
<button class="carousel-control-prev" data-bs-target="#carousel-id" data-bs-slide="prev">...</button>
<button class="carousel-control-next" data-bs-target="#carousel-id" data-bs-slide="next">...</button>
</div>Carousel
The carousel component cycles through a series of slides -- images, cards, or any HTML -- either automatically or through next/previous controls. Wrap each slide in a .carousel-item inside a .carousel-inner, and mark exactly one of them active so it shows first.
Note:
Give the carousel a unique
id and set data-bs-ride="carousel" on the outer .carousel element to start it auto-cycling as soon as the page loads.Example: Carousel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3">
<div class="container">
<div id="demoCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="d-flex align-items-center justify-content-center text-white fs-3" style="height:220px;background:linear-gradient(135deg,#0d6efd,#6610f2);">Slide 1</div>
</div>
<div class="carousel-item">
<div class="d-flex align-items-center justify-content-center text-white fs-3" style="height:220px;background:linear-gradient(135deg,#198754,#20c997);">Slide 2</div>
</div>
<div class="carousel-item">
<div class="d-flex align-items-center justify-content-center text-white fs-3" style="height:220px;background:linear-gradient(135deg,#dc3545,#fd7e14);">Slide 3</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#demoCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demoCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</body>
</html>Live Example
Common Mistakes
- Forgetting to put the
activeclass on exactly one.carousel-item, which leaves the carousel showing nothing at all. - Reusing the same carousel
idtwice on one page, so both sets of indicators and controls end up driving the wrong carousel. - Leaving out the Bootstrap JS bundle, so auto-cycling, the indicators, and the prev/next controls all silently do nothing.
🔒
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: