Card के Basics
एक card optional image, body, title, और text वाला एक flexible box है।
In this page:
Syntax
<div class="card">
<img src="image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Text</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>Card Basics
.card से शुरू करें और .card-img-top add करें, फिर .card-title, .card-text, और buttons hold करने वाला .card-body। Cards की default से कोई fixed width नहीं, इसलिए इसे grid columns या width utilities से control करें। ये list groups के साथ अच्छी तरह combine होते हैं।
Note:
Cards की width को responsively control करने के लिए इनके चारों ओर grid columns इस्तेमाल करें।
उदाहरण: Card basics
<!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="card" style="max-width: 18rem">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text for the card body.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</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. #}
आम गलतियां
- card-body भूल जाना
- Fixed pixel widths इस्तेमाल करना
- सिर्फ size के लिए चुने गए Heading tags
चैप्टर सारांश
- .card container है
- card-body content hold करता है
- card-title और card-text
- Width layout से आती है
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: