Carousel
Slides Only
<div id="carouselSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../img/1200x600-success.png" alt="First slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-danger.png" alt="Second slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-warning.png" alt="Third slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-info.png" alt="Fourth slide" class="d-block w-100">
</div>
</div>
</div><div id="carouselSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../img/1200x600-success.png" alt="First slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-danger.png" alt="Second slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-warning.png" alt="Third slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-info.png" alt="Fourth slide" class="d-block w-100">
</div>
</div>
</div>
Controls
<div id="carouselControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../img/1200x600-success.png" alt="First slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-danger.png" alt="Second slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-warning.png" alt="Third slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-info.png" alt="Fourth slide" class="d-block w-100">
</div>
</div>
<button type="button" class="carousel-control-prev" data-bs-target="#carouselControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button type="button" class="carousel-control-next" data-bs-target="#carouselControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div><div id="carouselControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../img/1200x600-success.png" alt="First slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-danger.png" alt="Second slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-warning.png" alt="Third slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-info.png" alt="Fourth slide" class="d-block w-100">
</div>
</div>
<button type="button" class="carousel-control-prev" data-bs-target="#carouselControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button type="button" class="carousel-control-next" data-bs-target="#carouselControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Indicators
<div id="carouselIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="0" aria-label="Slide 1" class="active"></button>
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../img/1200x600-success.png" alt="First slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-danger.png" alt="Second slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-warning.png" alt="Third slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-info.png" alt="Fourth slide" class="d-block w-100">
</div>
</div>
</div><div id="carouselIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="0" aria-label="Slide 1" class="active"></button>
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../img/1200x600-success.png" alt="First slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-danger.png" alt="Second slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-warning.png" alt="Third slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-info.png" alt="Fourth slide" class="d-block w-100">
</div>
</div>
</div>
Captions
Caption
This text describes the first slide
Caption
This text describes the second slide
Caption
This text describes the third slide
Caption
This text describes the fourth slide
<div id="carouselCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../img/1200x600-success.png" alt="First slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the first slide</p>
</div>
</div>
<div class="carousel-item">
<img src="../img/1200x600-danger.png" alt="Second slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the second slide</p>
</div>
</div>
<div class="carousel-item">
<img src="../img/1200x600-warning.png" alt="Third slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the third slide</p>
</div>
</div>
<div class="carousel-item">
<img src="../img/1200x600-info.png" alt="Fourth slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the fourth slide</p>
</div>
</div>
</div>
</div><div id="carouselCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../img/1200x600-success.png" alt="First slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the first slide</p>
</div>
</div>
<div class="carousel-item">
<img src="../img/1200x600-danger.png" alt="Second slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the second slide</p>
</div>
</div>
<div class="carousel-item">
<img src="../img/1200x600-warning.png" alt="Third slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the third slide</p>
</div>
</div>
<div class="carousel-item">
<img src="../img/1200x600-info.png" alt="Fourth slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the fourth slide</p>
</div>
</div>
</div>
</div>
Everything
Carousel with controls, indicators and captions
Caption
This text describes the first slide
Caption
This text describes the second slide
Caption
This text describes the third slide
Caption
This text describes the fourth slide
<div id="carouselAll" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselAll" data-bs-slide-to="0" aria-label="Slide 1" class="active"></button>
<button type="button" data-bs-target="#carouselAll" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselAll" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselAll" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../img/1200x600-success.png" alt="First slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the first slide</p>
</div>
</div>
<div class="carousel-item">
<img src="../img/1200x600-danger.png" alt="Second slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the second slide</p>
</div>
</div>
<div class="carousel-item">
<img src="../img/1200x600-warning.png" alt="Third slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the third slide</p>
</div>
</div>
<div class="carousel-item">
<img src="../img/1200x600-info.png" alt="Fourth slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the fourth slide</p>
</div>
</div>
</div>
<button type="button" class="carousel-control-prev" data-bs-target="#carouselAll" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button type="button" class="carousel-control-next" data-bs-target="#carouselAll" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div><div id="carouselAll" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselAll" data-bs-slide-to="0" aria-label="Slide 1" class="active"></button>
<button type="button" data-bs-target="#carouselAll" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselAll" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselAll" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../img/1200x600-success.png" alt="First slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the first slide</p>
</div>
</div>
<div class="carousel-item">
<img src="../img/1200x600-danger.png" alt="Second slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the second slide</p>
</div>
</div>
<div class="carousel-item">
<img src="../img/1200x600-warning.png" alt="Third slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the third slide</p>
</div>
</div>
<div class="carousel-item">
<img src="../img/1200x600-info.png" alt="Fourth slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the fourth slide</p>
</div>
</div>
</div>
<button type="button" class="carousel-control-prev" data-bs-target="#carouselAll" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button type="button" class="carousel-control-next" data-bs-target="#carouselAll" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Dark
Carousel with dark controls, indicators and captions
Caption
This text describes the first slide
Caption
This text describes the second slide
Caption
This text describes the third slide
Caption
This text describes the fourth slide
<div id="carouselDark" class="carousel slide carousel-dark" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselDark" data-bs-slide-to="0" aria-label="Slide 1" class="active"></button>
<button type="button" data-bs-target="#carouselDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselDark" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../img/1200x600-success.png" alt="First slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the first slide</p>
</div>
</div>
<div class="carousel-item">
<img src="../img/1200x600-danger.png" alt="Second slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the second slide</p>
</div>
</div>
<div class="carousel-item">
<img src="../img/1200x600-warning.png" alt="Third slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the third slide</p>
</div>
</div>
<div class="carousel-item">
<img src="../img/1200x600-info.png" alt="Fourth slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the fourth slide</p>
</div>
</div>
</div>
<button type="button" class="carousel-control-prev" data-bs-target="#carouselDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button type="button" class="carousel-control-next" data-bs-target="#carouselDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div><div id="carouselDark" class="carousel slide carousel-dark" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselDark" data-bs-slide-to="0" aria-label="Slide 1" class="active"></button>
<button type="button" data-bs-target="#carouselDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselDark" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../img/1200x600-success.png" alt="First slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the first slide</p>
</div>
</div>
<div class="carousel-item">
<img src="../img/1200x600-danger.png" alt="Second slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the second slide</p>
</div>
</div>
<div class="carousel-item">
<img src="../img/1200x600-warning.png" alt="Third slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the third slide</p>
</div>
</div>
<div class="carousel-item">
<img src="../img/1200x600-info.png" alt="Fourth slide" class="d-block w-100">
<div class="carousel-caption">
<h3>Caption</h3>
<p>This text describes the fourth slide</p>
</div>
</div>
</div>
<button type="button" class="carousel-control-prev" data-bs-target="#carouselDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button type="button" class="carousel-control-next" data-bs-target="#carouselDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Crossfade
<div id="carouselFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../img/1200x600-success.png" alt="First slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-danger.png" alt="Second slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-warning.png" alt="Third slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-info.png" alt="Fourth slide" class="d-block w-100">
</div>
</div>
</div><div id="carouselFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../img/1200x600-success.png" alt="First slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-danger.png" alt="Second slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-warning.png" alt="Third slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-info.png" alt="Fourth slide" class="d-block w-100">
</div>
</div>
</div>
Options
Carousel with options defined with data attributes
<div id="carouselOptions" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false" data-bs-wrap="false" data-bs-interval="2000" data-bs-keyboard="false">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselOptions" data-bs-slide-to="0" aria-label="Slide 1" class="active"></button>
<button type="button" data-bs-target="#carouselOptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselOptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselOptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../img/1200x600-success.png" alt="First slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-danger.png" alt="Second slide" class="d-block w-100">
</div>
<div class="carousel-item" data-bs-interval="1000">
<img src="../img/1200x600-warning.png" alt="Third slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-info.png" alt="Fourth slide" class="d-block w-100">
</div>
</div>
<button type="button" class="carousel-control-prev" data-bs-target="#carouselOptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button type="button" class="carousel-control-next" data-bs-target="#carouselOptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div><div id="carouselOptions" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false" data-bs-wrap="false" data-bs-interval="2000" data-bs-keyboard="false">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselOptions" data-bs-slide-to="0" aria-label="Slide 1" class="active"></button>
<button type="button" data-bs-target="#carouselOptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselOptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselOptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../img/1200x600-success.png" alt="First slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-danger.png" alt="Second slide" class="d-block w-100">
</div>
<div class="carousel-item" data-bs-interval="1000">
<img src="../img/1200x600-warning.png" alt="Third slide" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="../img/1200x600-info.png" alt="Fourth slide" class="d-block w-100">
</div>
</div>
<button type="button" class="carousel-control-prev" data-bs-target="#carouselOptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button type="button" class="carousel-control-next" data-bs-target="#carouselOptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>