Bootstrap cards, use the .card class. Customize content with headings, paragraphs, images, and buttons. Utilize contextual background colors and additional classes for styling and alignment. Cards offer flexible content containers with options for headers, footers, and powerful display settings.
In simple words, cards in Bootstrap are like little boxes where you can put different things to make them look good and easy to understand.
Table of Content
Using the .card class directly
This is the most basic approach. You create a card by applying the .card class to a div element and then nesting content within it.
Example: The below code implements the .card class to create a card using Bootstrap.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
integrity=
"sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<title>Bootstrap Card</title>
</head>
<body>
<div class="card">
<img class="card-img-top w-25"
alt="..."
src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg">
<div class="card-body">
<h5 class="card-title">
GFG Portal
</h5>
<p class="card-text">
Some quick example text to build on the card title
and make up the bulk of the card's
content.
</p>
<a href="#"
class="btn btn-success">
Go to Portal
</a>
</div>
</div>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous">
</script>
</body>
</html>
Output:
Bootstrap-card Example Output
Utilizing card-group, card-deck, card-columns classes
Bootstrap provides predefined layouts for grouping cards together, such as .card-group, .card-deck, and .card-columns. These layouts help in displaying multiple cards in a grid-like fashion.
Example: The below code will explain how you can group multiple cards together.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
integrity=
"sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<title>Bootstrap Card</title>
</head>
<body>
<div class="card-group">
<!-- Cards go here -->
<div class="card">
<img class="card-img-top w-25 mx-3 my-3"
alt="..."
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg">
<div class="card-body">
<h5 class="card-title">
GFG Portal
</h5>
<p class="card-text">
Description card-group
</p>
<a href="#" class="btn btn-success">
Go to Portal
</a>
</div>
</div>
<div class="card">
<img class="card-img-top w-25 mx-3 my-3"
alt="..."
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg">
<div class="card-body">
<h5 class="card-title">
GFG Portal
</h5>
<p class="card-text">
Description card-grou
p</p>
<a href="#" class="btn btn-success">
Go to Portal
</a>
</div>
</div>
<div class="card">
<img class="card-img-top w-25 mx-3 my-3"
alt="..."
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg">
<div class="card-body">
<h5 class="card-title">
GFG Portal
</h5>
<p class="card-text">
Description card-group
</p>
<a href="#" class="btn btn-success">
Go to Portal
</a>
</div>
</div>
<div class="card">
<img class="card-img-top w-25 mx-3 my-3"
alt="..."
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg">
<div class="card-body">
<h5 class="card-title">
GFG Portal
</h5>
<p class="card-text">
Description card-group
</p>
<a href="#" class="btn btn-success">
Go to Portal
</a>
</div>
</div>
</div>
<div class="card-deck">
<!-- Cards go here -->
<div class="card">
<img class="card-img-top w-25"
alt="..."
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg">
<div class="card-body">
<h5 class="card-title">
GFG Portal
</h5>
<p class="card-text">
Description card-deck
</p>
<a href="#" class="btn btn-success">
Go to Portal
</a>
</div>
</div>
<div class="card">
<img class="card-img-top w-25"
alt="..."
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg">
<div class="card-body">
<h5 class="card-title">
GFG Portal
</h5>
<p class="card-text">
Description card-deck
</p>
<a href="#"
class="btn btn-success">
Go to Portal
</a>
</div>
</div>
</div>
<div class="card-columns">
<!-- Cards go here -->
<div class="card">
<img class="card-img-top w-25"
alt="..."
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg">
<div class="card-body">
<h5 class="card-title">
GFG Portal
</h5>
<p class="card-text">
Description card-columns
</p>
<a href="#"
class="btn btn-success">
Go to Portal
</a>
</div>
</div>
<div class="card">
<img class="card-img-top w-25"
alt="..."
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg">
<div class="card-body">
<h5 class="card-title"
>GFG Portal
</h5>
<p class="card-text">
Description card-columns
</p>
<a href="#"
class="btn btn-success">
Go to Portal
</a>
</div>
</div>
</div>
<!-- Bootstrap JavaScript CDN -->
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous">
</script>
</body>
</html>
Output:
.gif)
Bootstrap card Example Output