A card is a flexible and extensible content container. It offers options for headers and footers, a range of information, background colors that are appropriate for the context, and strong display options. Using Bootstrap 3, cards will take the place of our previous panels, wells, and thumbnails. As modifier classes for cards, similar functionality to that of those components are accessible.
Today I will continue to bootstrap 5 cards.
4. Card images
Add .card-img-top or .card-img-bottom to an to place the image at the top or at the bottom inside the card. Note that we have added the image outside of the .card-body to span the entire width:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Card Image</h2>
<p>Image at the top (card-img-top):</p>
<div class="card" style="width:400px">
<img class="card-img-top" src="../bootstrap4/img_avatar1.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>
<br>
<p>Image at the bottom (card-img-bottom):</p>
<div class="card" style="width:400px">
<div class="card-body">
<h4 class="card-title">Jane Doe</h4>
<p class="card-text">Some example text some example text. Jane Doe is an architect and engineer</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
<img class="card-img-bottom" src="../bootstrap4/img_avatar6.png" alt="Card image" style="width:100%">
</div>
</div>
</body>
</html>
5. Card Image Overlays
Turn an image into a card background and use .card-img-overlay to add text on top of the image:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Card Image Overlay</h2>
<p>Turn an image into a card background and use .card-img-overlay to overlay the card's text:</p>
<div class="card img-fluid" style="width:500px">
<img class="card-img-top" src="../bootstrap4/img_avatar1.png" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>
</body>
</html>
I hope this is useful.
0 Comments