Caption slide carousel with Bootstrap

Ethan Karla 490 28 Jul 2021

How to create a Caption slides Carousel with Bootstrap?

Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

1 Answers

Anonymous User 03 Aug 2021

To create a Caption slides Carousel with Bootstrap library see the below example:

<html lang='en'>

<head>

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>

    <title>Bootstrap Dropdown</title>

    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>

    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>

</head>

<body>

    <div class='container d-flex justify-content-center flex-column'>

        <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='https://source.unsplash.com/1600x900/?nature,water' class='d-block w-100' alt='...'>

                    <div class='carousel-caption d-none d-md-block'>

                        <h5>Nature Lover</h5>

                        <p>Nature lovers will find the area a veritable paradise, with rocky coves and sandy beaches attracting many seabirds.</p>

                    </div>

                </div>

                <div class='carousel-item'>

                    <img src='https://source.unsplash.com/1600x900/?apple,iphone' class='d-block w-100' alt='...'>

                    <div class='carousel-caption d-none d-md-block'>

                        <h5>Apple iPhone</h5>

                        <p>In some ways, the iPhone is more like a palmtop computer than a cellular phone.</p>

                    </div>

                </div>

                <div class='carousel-item'>

                    <img src='https://source.unsplash.com/1600x900/?laptop,macbook' class='d-block w-100' alt='...'>

                    <div class='carousel-caption d-none d-md-block'>

                        <h5>Apple Mac</h5>

                        <p>The Macintosh is a family of personal computers designed, manufactured, and sold by Apple Inc. since January 1984.</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>

    </div>

</body>

</html>

Hope this will help you.

Happy Coding!

forum

Caption slide carousel with Bootstrap

Can you answer this question?

1 Answers