Today we will create cards using bootstrap v5.2. We will create card, design card with shadow and border. first you need to setup bootstrap v5.2 project. you can use cdn or read below article.
How to Install Bootstrap 5.2 with Vite
Bootstrap 5.2 Cards Examples
1. Simple Bootstrap v5.2 cards.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap v5.2 Cards Design</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
</head>
<body>
<div class="vh-100 d-flex justify-content-center align-items-center">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the
card's content.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
</div>
</body>
</html>
2. Bootstrap v5.2 cards with border style.
<div class="col-md-4">
<div class="card border border-primary">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the
card's content.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
3. Bootstrap v5.2 cards with image.
<div class="card border border-primary">
<img src="https://cdn.pixabay.com/photo/2022/08/03/15/29/bird-7362864__340.jpg" class="card-img-top"
alt="card image">
<div class="card-body">
<h5 class="card-title">Bootstrap v5.2 Card With Image</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the
card's content.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
4. Bootstrap v5.2 cards with shadow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap v5.2 Cards Shadow</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
</head>
<body>
<div class="vh-100 d-flex justify-content-center align-items-center">
<div class="col-md-3">
<div class="card border shadow-sm">
<div class="card-body">
<h5 class="card-title">Bootstrap v5.2 Card With shadow</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the
card's content.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
</div>
</body>
</html>