Card के Groups
कई cards एक joined set में group हो सकते हैं या एक responsive grid में layout हो सकते हैं।
In this page:
Syntax
<div class="card-group">
<div class="card">...</div>
<div class="card">...</div>
</div>Card Groups
.card-group cards को equal-height cards के एक attached block में जोड़ता है। responsively wrap होने वाले separate cards के लिए .row-cols-* वाला grid इस्तेमाल करें, उदाहरण के लिए row-cols-1 row-cols-md-3 g-4, और equal heights के लिए हर card पर h-100।
Note:
Responsive card layouts के लिए grid method prefer करें।
उदाहरण: 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/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- जब wrapping चाहिए तब card-group इस्तेमाल करना
- h-100 भूल जाना
- Uneven heights वाले Cards
चैप्टर सारांश
- card-group cards जोड़ता है
- row-cols वाला Grid separate cards देता है
- h-100 heights equalise करता है
- g-* spacing set करता है
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: