How to make Responsive Carousel in Bootstrap ?

How to make Responsive Carousel in Bootstrap ?

Last Updated : 29 Apr, 2024

Bootstrap Responsive Carousel simplifies the creation of responsive carousels for dynamic content display. Utilize the Carousel component with a suitable HTML structure, ensuring proper sizing and responsive breakpoints for optimal display across devices.

Responsive Carousel in Bootstrap

Approach

Create an HTML document with Bootstrap for styling.
Create a container with a centered heading, followed by a responsive carousel containing multiple slides with associated images.
Create Navigation controls (previous and next) to navigate through the carousel seamlessly.
Make whole webpage responsive.

Example : This example shows the implementation of above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Carousel</title>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
</head>

<body >

    <div class="container mt-5">
        <div class="row">
            <div class="col-12 text-center ">
                <h1 >
                     Responsive Carousel in Bootstrap 5
                  </h1>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <div id="carouselExampleIndicators" 
                     class="carousel slide" 
                     data-bs-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154939/html-(1).jpg"
                                class="d-block w-100" 
                                 alt="Slide 1">
                        </div>

                        <div class="carousel-item">
                            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154940/js-(1).jpg"
                                class="d-block w-100" 
                                 alt="Slide 2">
                        </div>

                        <div class="carousel-item">
                            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154942/web-(1).jpg"
                                class="d-block w-100" 
                                 alt="Slide 4">
                        </div>

                        <div class="carousel-item">
                            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154945/web2-(1).jpg"
                                class="d-block w-100" 
                                 alt="Slide 3">
                        </div>


                    </div>
                    <button class="carousel-control-prev" 
                            type="button" 
                            data-bs-target="#carouselExampleIndicators"
                            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="#carouselExampleIndicators"
                            data-bs-slide="next">
                        <span class="carousel-control-next-icon" 
                              aria-hidden="true">
                          </span>
                        <span class="visually-hidden">
                              Next
                          </span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
      </script>

</body>

</html>

Output:

responsive-carousel-Bootstrap — Responsive Carousel in Bootstrap Example Output

How to make Responsive Carousel in Bootstrap ?

S

skaftafh

Improve

Article Tags :

Similar Reads

How to make Text Responsive in Bootstrap ?

Making text responsive in Bootstrap involves using responsive typography utilities like .text-sm, .text-md, etc., to ensure text adapts to different screen sizes. This ensures readability and maintains visual hierarchy across devices. Below are the approaches to making text responsive in Bootstrap:

How to make iframe Responsive in Bootstrap ?

A responsive iframe in Bootstrap refers to embedding an iframe within a container that adjusts its size and aspect ratio based on the screen size, ensuring proper display and usability across various devices and viewports. ApproachIn this approach, we are using Bootstrap's Embed Responsive Classes.

How to Create Responsive Divs in Bootstrap ?

To create responsive divs in Bootstrap, utilize the grid system with container and row classes. Define columns using col classes and specify breakpoints for different screen sizes. This ensures divs adjust their layout and size responsively across devices. Below are the approaches to creating respon

How to make Form Responsive using Bootstrap ?

We are going to create a responsive form by using Bootstrap 5. responsiveness is a feature that allows users to interact with the web app on any device easily. It helps to create better UI interactions and a better user experience that can be a reason to have great traffic on the respective website.

How to Add a Responsive Carousel with Captions in Bootstrap ?

Carousels are interactive components in web design, often used to display multiple images or content sequentially. They're useful for showcasing images one after another, with captions providing additional context or information. We will see how to create a responsive carousel with captions in Boots