A card in bordered box with some padding around its content. It includes options for headers, footers, content, colors.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="card" style="width: 18rem;">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img"
aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96">
</rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">example consider “www.wikitechy.com” is a website.</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
</body>
</html>
Bootstrap Card Title, 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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Subtitle</h6>
<p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
<a href="#" class="card-link">Link</a>
</div>
</div>
</body>
</html>
<body class="p-3 m-0 border-0 bd-example">
<div class="card" style="width: 18rem;">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">example consider “www.wikitechy.com” is a website.</p>
<a href="#" class="btn btn-primary">Go</a>
</div>
</div>
</body>
</html>
.card-img-top places an image to the top of the card. With .card-text, text can be added to the card.
Text within .card-text can also be styled with the standard HTML tags.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="card" style="width: 18rem;">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img"
aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
<div class="card-body">
<p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
</div>
</div>
</body>
</html>
Bootstrap Card List Groups Example 1
In Bootstrap, a card list group is a list of related items displayed in a card-like format. This is achieved by combining the card component with the list-group component.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">KaashivInfotech</li>
<li class="list-group-item">Wikitechy</li>
<li class="list-group-item">Kaashiv</li>
</ul>
</div>
</body>
</html>
Bootstrap Card List Groups Example 2
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">KaashivInfotech</li>
<li class="list-group-item">Wikitechy</li>
<li class="list-group-item">Kaashiv</li>
</ul>
</div>
</body>
</html>
Bootstrap Card List Groups Example 3
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">KaashivInfotech</li>
<li class="list-group-item">wikitechy</li>
<li class="list-group-item">Kaashiv</li>
</ul>
<div class="card-footer">
Card footer
</div>
</div>
</body>
</html>
Bootstrap Card Kitchen Sink
Image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="card" style="width: 18rem;">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img"
aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">KaashivInfotech</li>
<li class="list-group-item">wikitechy</li>
<li class="list-group-item">Kaashiv</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Link</a>
</div>
</div>
</body>
</html>
Bootstrap Header and Footer Example 1
The .card-header class adds a heading to the card and the .card-footer class adds a footer to the card
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
<a href="#" class="btn btn-primary">Link</a>
</div>
</div>
</body>
</html>
Bootstrap Header and Footer Example 2
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
<a href="#" class="btn btn-primary">Link</a>
</div>
</div>
</body>
</html>
Bootstrap Header and Footer Example 3
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</body>
</html>
Bootstrap Header and Footer Example 4
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
<a href="#" class="btn btn-primary">Link</a>
</div>
<div class="card-footer text-muted">
3 days ago
</div>
</div>
</body>
</html>
Bootstrap Card Navigation
Bootstrap Card Navigation is a user interface design pattern in which a set of cards are used as navigation items to switch between different content sections or pages.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="true" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
<a href="#" class="btn btn-primary">Somewhere</a>
</div>
</div>
</body>
</html>
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.
We have added the image outside of the .card-body to span the entire width:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="card mb-3">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img"
aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
<div class="card-body">
<h5 class="card-title">KaashivInfotech</h5>
<p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
<p class="card-text"><small class="text-muted">Last updated 5 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">KaashivInfotech</h5>
<p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
<p class="card-text"><small class="text-muted">Last updated 5 mins ago</small></p>
</div>
<svg class="bd-placeholder-img card-img-bottom" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img"
aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
</div>
</body>
</html>
Bootstrap Card Image overlay
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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="card text-bg-dark">
<svg class="bd-placeholder-img bd-placeholder-img-lg card-img" width="100%" height="270"
xmlns="http://www.w3.org/2000/svg"
role="img" aria-label="Placeholder: Card image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Card image</text></svg>
<div class="card-img-overlay">
<h5 class="card-title">Title</h5>
<p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
<p class="card-text"><small>Last updated 5 mins ago</small></p>
</div>
</div>
</body>
</html>
Bootstrap Card Background Color
You can use the bg-* classes in Bootstrap to set the background color of a card. For example, bg-primary sets the background color to the primary color defined in the Bootstrap theme, while bg-dark sets the background color to a dark shade. You can also set a custom background color by using the bg-* classes along with a color name or a HEX code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Primary</div>
</div>
<div class="card text-bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Secondary</div>
</div>
<div class="card text-bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Success</div>
</div>
<div class="card text-bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Danger</div>
</div>
<div class="card text-bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Warning</div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Info</div>
</div>
<div class="card text-bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Light</div>
</div>
<div class="card text-bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Dark</div>
</div>
</body>
</html>
You can use the border-* classes in Bootstrap to set the border of a card. For example, border-primary sets the border color to the primary color defined in the Bootstrap theme, while border-dark sets the border color to a dark shade. You can also set the border width by using the border-* classes along with a width value such as border-1, border-2, etc.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Primary</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Secondary</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Success</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Danger</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Warning</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Info</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Light</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Dark</div>
</div>
</body>
</html>
Bootstrap Card Group is a component in the Bootstrap framework that allows you to group multiple cards together into a single, cohesive unit.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="card-group">
<div class="card">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img"
aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 5 mins ago</small>
</div>
</div>
<div class="card">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img"
aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 5 mins ago</small>
</div>
</div>
<div class="card">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img"
aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">The example consider “www.wikitechy.com” is a website.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 5 mins ago</small>
</div>
</div>
</div>
</body>
</html>
