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.
<!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.w3wiki.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.w3wiki.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.w3wiki.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.w3wiki.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.w3wiki.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.w3wiki.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.w3wiki.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.w3wiki.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:
Bootstrap card Example Output
How to Create Cards in Bootstrap ?
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
- Utilizing card-group, card-deck, card-columns classes