---
title: "How to create a Caption slides Carousel with Bootstrap?"  
description: "How to create a Caption slides Carousel with Bootstrap?"  
author: "Ethan Karla"  
published: 2021-07-28  
canonical: https://answers.mindstick.com/qa/93872/how-to-create-a-caption-slides-carousel-with-bootstrap  
category: "web application"  
tags: ["web development", "web application development"]  
reading_time: 3 minutes  

---

# How to create a Caption slides Carousel with Bootstrap?

How to create a Caption slides [Carousel](https://www.mindstick.com/forum/1014/how-to-create-carousel-in-sencha-touch) with [Bootstrap](https://www.mindstick.com/articles/43948/top-free-resources-for-learning-and-perfecting-bootstrap-programming)?

## Answers

### Answer by Ravi Vishwakarma

```
<!doctype html>
<html lang='en'>
<head>
    <!-- Required meta tags -->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- Bootstrap CSS -->
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
    <title>Slider demo</title>
</head>
<body>
    <div class='container mt-3 '>
        <h1 class='text-center'>Slider demo</h1>
        <hr />
        <div class='carousel slide bg-dark text-white' id='slider' data-bs-ride='carousel'>
            <div class='carousel-indicators'>
                <button type='button' data-bs-target='#slider' data-bs-slide-to='0' class='active' aria-current='true' aria-label='Slide 1'></button>
                <button type='button' data-bs-target='#slider' data-bs-slide-to='1' aria-label='Slide 2'></button>
                <button type='button' data-bs-target='#slider' data-bs-slide-to='2' aria-label='Slide 3'></button>
            </div>
            <div class='carousel-inner text-center'>
                <div class='carousel-item active'>
                    <img src='logo.png' class='d-block w-100 h-50 ' alt='slide one'>
                    <div class='carousel-caption d-none d-md-block'>
                        <h5>First slide</h5>
                        <p>This is wings.</p>
                    </div>
                </div>
                <div class='carousel-item'>
                    <img src='cat.png' class='d-block w-100' alt='slide two'>
                    <div class='carousel-caption d-none d-md-block'>
                        <h5>Second slide</h5>
                        <p>This is cat.</p>
                    </div>
                </div>
                <div class='carousel-item'>
                    <img src='design.png' class='d-block w-100' alt='slide three'>
                   <div class='carousel-caption d-none d-md-block'>
                        <h5>Thierd slide</h5>
                        <p>This is disign.</p>
                    </div>
                </div>
            </div>
            <button class='carousel-control-prev' type='button' data-bs-target='#slider' 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='#slider' data-bs-slide='next'>
                <span class='carousel-control-next-icon' aria-hidden='true'></span>
                <span class='visually-hidden'>Next</span>
            </button>
        </div>
    </div>
    <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>
</body>
</html>
```

Output ![How to create a Caption slides Carousel with Bootstrap?](https://answers.mindstick.com/questionanswer/392f5b9c-8e9a-4f2f-aa2a-cc6dd5b912ef/images/cdff0374-6b54-4f46-a845-6b1434d8c7a8.png) \


---

Original Source: https://answers.mindstick.com/qa/93872/how-to-create-a-caption-slides-carousel-with-bootstrap

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
