Bootstrap Q&A Logo
Bootstrap Q&A Part of the Q&A Network
Real Questions. Clear Answers.
Ask any question about Bootstrap here... and get an instant response.
Q&A Balloon Q&A Logo
Post this Question & Answer:

How can I add a carousel with captions using Bootstrap 5?

Asked on May 04, 2025

Answer

To add a carousel with captions in Bootstrap 5, you can use the `carousel` component which allows you to create a slideshow with images and text.
<!-- BEGIN COPY / PASTE -->
        <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="image1.jpg" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>First slide label</h5>
                        <p>Some representative placeholder content for the first slide.</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="image2.jpg" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>Second slide label</h5>
                        <p>Some representative placeholder content for the second slide.</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="image3.jpg" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>Third slide label</h5>
                        <p>Some representative placeholder content for the third slide.</p>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
        <!-- END COPY / PASTE -->
Additional Comment:
  • Ensure you replace `image1.jpg


✅ Answered with Bootstrap 5 best practices.

← Back to All Questions

Q&A Network
The Q&A Network
Bootstrap
Ask Questions / Get Answers about Bootstrap!
AI Writing
Ask Questions / Get Answers about AI Writing!
SEO
Ask Questions / Get Answers about SEO!
JavaScript
Ask Questions / Get Answers about JavaScript!
AI Education
Ask Questions / Get Answers about AI Education!
Motion Graphics
Ask Questions / Get Answers about Motion Graphics!
Podcasting
Ask Questions / Get Answers about Podcasting!
HTML
Ask Questions / Get Answers about HTML!
VR & AR
Ask Questions / Get Answers about VR & AR!
Cybersecurity
Ask Questions / Get Answers about Cybersecurity!
Web Hosting
Ask Questions / Get Answers about Hosting!
Film Production
Ask Questions / Get Answers about Film Production!
AI Coding
Ask Questions / Get Answers about AI Coding!
MobileDev
Ask Questions / Get Answers about Mobile Developement!
Data Science
Ask Questions / Get Answers about Data Science!
DevOps
Ask Questions / Get Answers about DevOps!
Animation
Ask Questions / Get Answers about Animation!
AI Business
Ask Questions / Get Answers about AI Business!
Sound Design
Ask Questions / Get Answers about Sound Design!
Tailwind
Ask Questions / Get Answers about Tailwind!
Chatbots
Ask Questions / Get Answers about Chatbots!
CSS
Ask Questions / Get Answers about CSS!
Creative Writing
Ask Questions / Get Answers about Creative Writing!
3D Design
Ask Questions / Get Answers about 3D Design!
UI/UX Design
Ask Questions / Get Answers about UI/UX Design!
Networking
Ask Questions / Get Answers about Networking!
Analytics
Ask Questions / Get Answers about Analytics!
Cloud Computing
Ask Questions / Get Answers about Cloud Computing!
WordPress
Ask Questions / Get Answers about WordPress!
Security
Ask Questions / Get Answers about Website Security!
Web Development
Ask Questions / Get Answers about Web Development!
IoT
Ask Questions / Get Answers about IoT!
AI Video
Ask Questions / Get Answers about AI Video!
Photography
Ask Questions / Get Answers about Photography!
Graphic Design
Ask Questions / Get Answers about Graphic Design!
Web Languages
Ask Questions / Get Answers about Web Languages!
Quantum
Ask Questions / Get Answers about Quantum Computing!
AI Design
Ask Questions / Get Answers about AI Design!
AI Audio
Ask Questions / Get Answers about AI Audio!
Illustration
Ask Questions / Get Answers about Illustration!
Video Editing
Ask Questions / Get Answers about Video Editing!
Performance
Ask Questions / Get Answers about Web Vitals!
AI Marketing
Ask Questions / Get Answers about AI Marketing!
AI Ethics
Ask Questions / Get Answers about AI Ethics!
AI
Ask Questions / Get Answers about AI!
Robotics
Ask Questions / Get Answers about Robotics!
Monetization
Ask Questions / Get Answers about Ad & Monetization!
AI Images
Ask Questions / Get Answers about AI Images!