Design a Responsive Card with a Carousel inside it in Bootstrap

Last Updated : 22 Jul, 2024

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:

How to Declare Specific Type of Keys in an Object in TypeScript ?

geekcoder2298

Improve

Article Tags :

Design a Responsive Card with a Carousel inside it in Bootstrap

Preview:

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?