Open In App

Design a Responsive Card with a Carousel inside it in Bootstrap

Last Updated : 22 Jul, 2024
Comments
Improve
Suggest changes
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:

Approach

Here 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:


G

geekcoder2298
Improve
Article Tags :

Explore

Lightbox