In this tutorial, we'll learn how to make a card in bootstrap 5
In this example, I have a link style from bootstrap documentation bootstrap.min.css from this file, my card will come.
Apart from that I have added extra style as per my design requirement, You can see in this example I have add two class, 1. card-title 2. card-text although you can add customize the card design as per your requirements by giving important in the style.
In this example took a section tag and inside the section tag one div tag and this div tag add a container class and inside the container, the div took a row class to maintain the vertical layout.
card class - For Card Layout.
card-img-top class - For Image Settlement.
card-body class - For text layout.
card-title class - For card title.
card-text class - For card raw text.
Bootstrap Card example
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 5 - Cart Design</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style type="text/css">
.card-title{
font-weight: bold;
font-size: 22px;
}
.card-text{
font-size: 15px;
color: #555;
}
</style>
</head>
<body>
<section>
<div class="container">
<div class="row mt-5">
<!-- card one -->
<div class="col-lg-3 mt-5">
<div class="card">
<img src="image.jpg" class="card-img-top" alt="...">
<div class="card-body mt-3">
<h5 class="card-title">Card Title</h5>
<p class="card-text pt-2 pb-3">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
</div>
<!-- card two -->
<div class="col-lg-3 mt-5">
<div class="card">
<img src="image.jpg" class="card-img-top" alt="...">
<div class="card-body mt-3">
<h5 class="card-title">Card Title</h5>
<p class="card-text pt-2 pb-3">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
</div>
<!-- card three -->
<div class="col-lg-3 mt-5">
<div class="card">
<img src="image.jpg" class="card-img-top" alt="...">
<div class="card-body mt-3">
<h5 class="card-title">Card Title</h5>
<p class="card-text pt-2 pb-3">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
</div>
<!-- card four -->
<div class="col-lg-3 mt-5">
<div class="card">
<img src="image.jpg" class="card-img-top" alt="...">
<div class="card-body mt-3">
<h5 class="card-title">Card Title</h5>
<p class="card-text pt-2 pb-3">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
We always thanks to you for reading our blogs.
Dharmesh Chauhan
(Swapinfoway Founder)Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us
Haresh Chauhan
(Co-Founder)