Design a Responsive Card with a Carousel inside it in Bootstrap Last Updated : 22 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report A responsive carousel displays images or content in a rotating manner, adjusting seamlessly to different screen sizes for optimal viewing experience. In this article, we will create a responsive card with a carousel inside it with the help of Bootstrap5.Preview:ApproachHere we create a Bootstrap card with a responsive carousel inside. It contains a header, a body with a carousel, and a footer. The carousel displays tutorial images and automatically transitions every second. Custom styles add margins and paddings for spacing. JavaScript ensures carousel sliding functionality, enhancing user experience by dynamically showcasing content across various screen sizes.Example: This example shows the implementation of the 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 Card with Carousel</title> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <style> .card { margin-top: 50px; /* Add margin to the top of the card */ } .card-body { padding: 20px; /* Add padding to the card body */ } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-6 offset-lg-3"> <div class="card"> <div class="card-header"> Card Component with responsive carosuel </div> <div class="card-body"> <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" data-bs-interval="1000"> <div class="carousel-inner"> <div class="carousel-item active"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230305182658/HTML-tutorial.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20230427130955/CSS-Tutorial.webp" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230305183140/Javascript.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230310132605/Bootstrap-Tutorial.jpg" class="d-block w-100" alt="..."> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> <div class="card-footer text-muted"> Responsive Carousel </div> </div> </div> </div> </div> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> <script> // Trigger carousel sliding automatically every one second setInterval(function () { let carousel = document.querySelector('#carouselExampleControls'); let carouselInstance = bootstrap.Carousel.getInstance(carousel); carouselInstance.next(); }, 1000); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article Design a Responsive Card with a Carousel inside it in Bootstrap G geekcoder2298 Follow Improve Article Tags : Project Web Technologies Bootstrap Dev Scripter Bootstrap-5 Dev Scripter 2024 +2 More Similar Reads 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 2 min read Create Responsive Flip Cards with Bootstrap 5 Responsive Flip Cards utilize CSS and Bootstrap to create interactive card elements that flip to reveal content on hover, staying centered within the screen for optimal display on various devices. In this article, we will create Responsive Flip Cards with Bootstrap 5.Preview:Prerequisites HTMLCSSJav 2 min read How to make Responsive Carousel in Bootstrap ? 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. ApproachCreate an HTML document with Bootstr 2 min read How to design Responsive card-deck with fixed width in Bootstrap? To design a responsive card deck with a fixed width in Bootstrap, utilize a grid layout of cards. Apply custom CSS to set a fixed width for each card, ensuring they maintain consistent dimensions across various screen sizes. Utilize Bootstrap's responsive utilities to adjust card spacing and layout 3 min read How to Create Responsive Card with a Video Background in Bootstrap? Cards are very useful things in web development. Cards can hold various types of content, such as text, images, and links, making them perfect for displaying information in a structured format. And the background video can enhance the style of the web page. In this tutorial, we will focus on how to 2 min read Like