---
title: "How to make a slider with the help of Bootstrap classes?"  
description: "How to make a slider with the help of Bootstrap classes?"  
author: "Ethan Karla"  
published: 2021-07-28  
canonical: https://answers.mindstick.com/qa/93870/how-to-make-a-slider-with-the-help-of-bootstrap-classes  
category: "web application"  
tags: ["web development", "web application development"]  
reading_time: 3 minutes  

---

# How to make a slider with the help of Bootstrap classes?

How to make a slider with the help of [Bootstrap](https://www.mindstick.com/articles/43948/top-free-resources-for-learning-and-perfecting-bootstrap-programming) classes?

## Answers

### Answer by Ravi Vishwakarma

The Bootstrap Carousel or sider is a flexible, responsive path. It is used to add the slider to your web page. It is very responsive and flexible. With this, you can also add Images, Iframes, Videos, and any other type of content.

```
<!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>
                <div class='carousel-item'>
                    <img src='cat.png' class='d-block w-100' alt='slide two'>
                </div>
                <div class='carousel-item'>
                    <img src='design.png' class='d-block w-100' alt='slide three'>
                </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 make a slider with the help of Bootstrap classes?](https://answers.mindstick.com/questionanswer/04924b6e-6bdb-420a-b632-c602fc5c90a0/images/57e3422b-68ef-4922-82ab-620a885cc57f.png)

\


---

Original Source: https://answers.mindstick.com/qa/93870/how-to-make-a-slider-with-the-help-of-bootstrap-classes

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
