Card groups
Several cards can be grouped in a joined set or laid out in a responsive grid.
In this page:
Syntax
<div class="card-group">
<div class="card">...</div>
<div class="card">...</div>
</div>Card groups
.card-group joins cards into one attached block of equal-height cards. For separate cards that wrap responsively use the grid with .row-cols-*, for example row-cols-1 row-cols-md-3 g-4, and h-100 on each card for equal heights.
Note:
Prefer the grid method for responsive card layouts.
Example: Card groups
<!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">
</head>
<body class="p-3">
<div class="container">
<div class="row row-cols-1 row-cols-md-3 g-3">
<div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">One</h5><p class="card-text">Short text.</p></div></div></div>
<div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Two</h5><p class="card-text">A much longer piece of text makes this card taller than the others, yet they stay equal.</p></div></div></div>
<div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Three</h5><p class="card-text">Text.</p></div></div></div>
</div>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Using card-group when wrapping is needed
- Forgetting h-100
- Cards of uneven heights
Chapter Summary
- card-group joins cards
- Grid with row-cols gives separate cards
- h-100 equalises heights
- g-* sets spacing
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: