Bootstrap 5 Responsive Cards Grid Example
Bootstrap 5 Responsive Cards HTML with card images by using Bootstrap Grid layout. Bootstrap cards are useful for any section such as our services, our team, blog post, and the latest news section.
Add HTML
<section class="bg-light py-4 my-5">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="mb-3 text-danger">Bootstrap 5 Cards</h2>
</div>
<div class="col-md-6 col-lg-4">
<div class="card my-3">
<div class="card-thumbnail">
<img src="https://www.markuptag.com/images/image-one.jpg" class="img-fluid" alt="thumbnail">
</div>
<div class="card-body">
<h3 class="card-title"><a href="#" class="text-secondary">What is Lorem Ipsum?</a></h3>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card my-3">
<div class="card-thumbnail">
<img src="https://www.markuptag.com/images/image-two.jpg" class="img-fluid" alt="thumbnail">
</div>
<div class="card-body">
<h3 class="card-title"><a href="#" class="text-secondary">Why do we use it?</a></h3>
<p class="card-text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem</p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card my-3">
<div class="card-thumbnail">
<img src="https://www.markuptag.com/images/image-three.jpg" class="img-fluid" alt="thumbnail">
</div>
<div class="card-body">
<h3 class="card-title"><a href="#" class="text-secondary">Where does it come from?</a></h3>
<p class="card-text">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it</p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card my-3">
<div class="card-thumbnail">
<img src="https://www.markuptag.com/images/image-four.jpg" class="img-fluid" alt="thumbnail">
</div>
<div class="card-body">
<h3 class="card-title"><a href="#" class="text-secondary">What is Lorem Ipsum?</a></h3>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card my-3">
<div class="card-thumbnail">
<img src="https://www.markuptag.com/images/image-five.jpg" class="img-fluid" alt="thumbnail">
</div>
<div class="card-body">
<h3 class="card-title"><a href="#" class="text-secondary">Why do we use it?</a></h3>
<p class="card-text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem</p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card my-3">
<div class="card-thumbnail">
<img src="https://www.markuptag.com/images/image-six.jpg" class="img-fluid" alt="thumbnail">
</div>
<div class="card-body">
<h3 class="card-title"><a href="#" class="text-secondary">Where does it come from?</a></h3>
<p class="card-text">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it</p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
</div>
</div>
</div>
</div>
</section>Add CSS
This CSS code is used just to hide the extra height of the card thumbnail whereby the card height well maintained. If you don’t want to use it then remove it.
.card-thumbnail {
max-height: 250px;
overflow: hidden;
}Bootstrap 5 Cards Full Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Cards Grid Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://www.markuptag.com/bootstrap/5/css/bootstrap.min.css">
<style>
.card-thumbnail {
max-height: 250px;
overflow: hidden;
}
</style>
</head>
<body>
<!-- Bootstrap 5 Cards in Grid -->
<section class="bg-light py-4 my-5">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="mb-3 text-danger">Bootstrap 5 Cards</h2>
</div>
<div class="col-md-6 col-lg-4">
<div class="card my-3">
<div class="card-thumbnail">
<img src="https://www.markuptag.com/images/image-one.jpg" class="img-fluid" alt="thumbnail">
</div>
<div class="card-body">
<h3 class="card-title"><a href="#" class="text-secondary">What is Lorem Ipsum?</a></h3>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card my-3">
<div class="card-thumbnail">
<img src="https://www.markuptag.com/images/image-two.jpg" class="img-fluid" alt="thumbnail">
</div>
<div class="card-body">
<h3 class="card-title"><a href="#" class="text-secondary">Why do we use it?</a></h3>
<p class="card-text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem</p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card my-3">
<div class="card-thumbnail">
<img src="https://www.markuptag.com/images/image-three.jpg" class="img-fluid" alt="thumbnail">
</div>
<div class="card-body">
<h3 class="card-title"><a href="#" class="text-secondary">Where does it come from?</a></h3>
<p class="card-text">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it</p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card my-3">
<div class="card-thumbnail">
<img src="https://www.markuptag.com/images/image-four.jpg" class="img-fluid" alt="thumbnail">
</div>
<div class="card-body">
<h3 class="card-title"><a href="#" class="text-secondary">What is Lorem Ipsum?</a></h3>
<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card my-3">
<div class="card-thumbnail">
<img src="https://www.markuptag.com/images/image-five.jpg" class="img-fluid" alt="thumbnail">
</div>
<div class="card-body">
<h3 class="card-title"><a href="#" class="text-secondary">Why do we use it?</a></h3>
<p class="card-text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem</p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card my-3">
<div class="card-thumbnail">
<img src="https://www.markuptag.com/images/image-six.jpg" class="img-fluid" alt="thumbnail">
</div>
<div class="card-body">
<h3 class="card-title"><a href="#" class="text-secondary">Where does it come from?</a></h3>
<p class="card-text">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it</p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JS -->
<script src="https://www.markuptag.com/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
