Bootstrap 5-Cards
A card in Bootstrap 5 is a bordered box with some padding around its content. It includes options for headers, footers, content, colors, etc.
Basic Card
<html lang = "en"><head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<h2>Card Header & Footer</h2>
<div class="card">
<div class="card-header">Header </div>
<div class="card-body">Content </div>
<div class="card-footer">Footer </div>
</div>
</div>
</body>
</html>
Output
Card Header & Footer
Header
Content
Card Example
<html lang = "en"><head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<h2>Card Image</h2>
<p>Image at the top (card-img-top):<p>
<div class="card" style="width:400px">
<h4> Card Image </h4>
<img class="card-img-top" src="images/pro.png" alt="Card image" style="width:100%">
<div class = "card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>
</body>
</html>
Output
Card Image
Image at the top (card-img-top):
Card Image
