Carousel
Carousel Only
Create a default carousel using Bootstrap's .carousel class. Use <div class="carousel slide"> to set up the carousel, and include <div class="carousel-inner"> with <div class="carousel-item"> elements for each slide.
With Controls
Add navigation controls to a Bootstrap carousel by including <button class="carousel-control-prev"> and <button class="carousel-control-next"> elements. These controls allow users to move between slides in the carousel.
With default Indicators
Add default indicators to a Bootstrap carousel by including <ol class="carousel-indicators"> with <li data-bs-target="#carouselExample" data-bs-slide-to="0"> elements for each slide. These indicators provide visual navigation for users.
Crossfade Animation
Enable crossfade animation in a Bootstrap carousel by adding the .carousel-fade class to the <div class="carousel slide">. This creates a smooth fade transition between slides.
Dots Indicators
Use custom dots for carousel indicators by adding <div class="carousel-indicators-dots"> with your desired dot styles. Replace the default <ol class="carousel-indicators"> with your custom dots to style carousel navigation.
Bullet Indicators
Customize carousel indicators with bullet styles by using <ul class="carousel-indicators-bullet"> instead of the default <ol class="carousel-indicators">. Style each <li> to create unique bullet indicators for your carousel.
With Captions
Add captions to Bootstrap carousel slides by including <div class="carousel-caption"> inside each <div class="carousel-item">. Place your caption text within this container to provide additional information on each slide.
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.
Dark variant carousel
Create a dark variant of a Bootstrap carousel by adding the .carousel-dark class to the <div class="carousel slide">. This adjusts the carousel's text and controls for better visibility on dark backgrounds.
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.