Bootstrap Card
Card is like a box having some bordered-around the context with some padding.
Let’s understand this by the following program :-
Basic Card - It creates with .card class
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Basic Card </h2>
<div class="card">
<div class="card-body">Basic card</div>
</div>
</div>
</body>
</html>
Output of this Program
So here we just created our basic card.
Card Images
We can also use images in our cards . The context which we want to write about , we can write that on the top of the image as well as at the bottom .And we use .card class for it.
Let’s understand them by this program :-
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Card Image</h2>
<p>Image at the top</p>
<div class="card" style="width:300px">
<img class="card-img-top" src="pythonimage/scenery.jpg" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">Scenery</h4>
<p class="card-text">It is a beautiful picture.</p>
<a href="#" class="btn btn-primary"> See details</a>
</div>
</div>
<p>Image at the bottom (card-img-bottom )</p>
<div class="card" style="width:300px">
<div class="card-body">
<h4 class="card-title">Scenery</h4>
<p class="card-text">It is a beautiful picture.</p>
<a href="#" class="btn btn-primary"> See details</a>
</div>
<img class="card-img-top" src="pythonimage/scenery.jpg" alt="Card image" style="width:100%">
</div>
</div>
</body>
</html>
Output of this Program
bootstrap 5 Example
Card Image
Image at the top
Image at the bottom (card-img-bottom )
Contextual Cards
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Cards with Contextual Classes</h2>
<div class="card">
<div class="card-body">Basic card</div>
</div>
<div class="card bg-primary text-white">
<div class="card-body">Primary card</div>
</div>
<div class="card bg-success text-white">
<div class="card-body">Success card</div>
</div>
<div class="card bg-info text-white">
<div class="card-body">Info card</div>
</div>
<div class="card bg-warning text-white">
<div class="card-body">Warning card</div>
</div>
<div class="card bg-danger text-white">
<div class="card-body">Danger card</div>
</div>
<div class="card bg-secondary text-white">
<div class="card-body">Secondary card</div>
</div>
<div class="card bg-dark text-white">
<div class="card-body">Dark card</div>
</div>
<div class="card bg-light text-dark">
<div class="card-body">Light card</div>
</div>
</body>
</html>
Output of this Program
bootstrap 5 Example
Cards with Contextual Classes
Card Deck
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
<p class="card-text">Some more text to increase the height</p>
<p class="card-text">Some more text to increase the height</p>
<p class="card-text">Some more text to increase the height</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
</div>
</div>
</body>
</html>
Output of this Program
bootstrap 5 Example
Some text inside the first card
Some more text to increase the height
Some more text to increase the height
Some more text to increase the height
Some text inside the second card
Some text inside the third card
Some text inside the fourth card
So here we just put the images and write the context once at the top , and once at the bottom of the image.