Menu
Bootstrap 5 Cards
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.
John Doe
Some example text some example text. John Doe is an architect and engineer
Basic Card
A basic card is created with the .card class, and content inside the card has a .card-body class:
Example
<!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.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Basic Card</h2>
<div>
<div>Basic card</div>
</div>
</div>
</body>
</html>
Header and Footer
The .card-header class adds a heading to the card and the .card-footer class adds a footer to the card:
Example
<!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.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Card Header and Footer</h2>
<div>
<div>Header</div>
<div>Content</div>
<div>Footer</div>
</div>
</div>
</body>
</html>
Contextual Cards
To add a background color the card, use contextual classes (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
Example
<!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.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Cards with Contextual Classes</h2>
<div>
<div>Basic card</div>
</div>
<br>
<div>
<div>Primary card</div>
</div>
<br>
<div>
<div>Success card</div>
</div>
<br>
<div>
<div>Info card</div>
</div>
<br>
<div>
<div>Warning card</div>
</div>
<br>
<div>
<div>Danger card</div>
</div>
<br>
<div>
<div>Secondary card</div>
</div>
<br>
<div>
<div>Dark card</div>
</div>
<br>
<div>
<div>Light card</div>
</div>
</div>
</body>
</html>
Titles, text, and links
Use .card-title to add card titles to any heading element. The .card-text class is used to remove bottom margins for a <p> element if it is the last child (or the only one) inside .card-body. The .card-link class adds a blue color to any link, and a hover effect.
Example
<!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.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Card titles, text, and links</h2>
<p>Use .card-title to add card titles to any heading element. The .card-text class is used to remove bottom margins for a p element if it is the last child (or the only one) in card-body. The .card-link class adds a blue color to any link, and a hover effect.</p>
<div>
<div>
<h4>Card title</h4>
<p>Some example text. Some example text.</p>
<a href=”#”>Card link</a>
<a href=”#”>Another link</a>
</div>
</div>
</div>
</body>
</html>
Card Images
John Doe
Some example text some example text. John Doe is an architect and engineer
Add .card-img-top or .card-img-bottom to an <img> 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:
Example
<!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.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Card Image</h2>
<p>Image at the top (card-img-top):</p>
<div style=”width:400px”>
<img src=”../bootstrap4/img_avatar1.png” alt=”Card image” style=”width:100%”>
<div>
<h4>John Doe</h4>
<p>Some example text some example text. John Doe is an architect and engineer</p>
<a href=”#”>See Profile</a>
</div>
</div>
<br>
<p>Image at the bottom (card-img-bottom):</p>
<div style=”width:400px”>
<div>
<h4>Jane Doe</h4>
<p>Some example text some example text. Jane Doe is an architect and engineer</p>
<a href=”#”>See Profile</a>
</div>
<img src=”../bootstrap4/img_avatar6.png” alt=”Card image” style=”width:100%”>
</div>
</div>
</body>
</html>
Card Image Overlays
John Doe
Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.
Turn an image into a card background and use .card-img-overlay to add text on top of the image:
Example
<!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.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<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 style=”width:500px”>
<img src=”../bootstrap4/img_avatar1.png” alt=”Card image” style=”width:100%”>
<div>
<h4>John Doe</h4>
<p>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=”#”>See Profile</a>
</div>
</div>
</div>
</body>
</html>