Card का Header/Footer
Headers और footers एक card में labelled top और bottom strips add करते हैं।
In this page:
Syntax
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Body</div>
<div class="card-footer">Footer</div>
</div>Card Header/Footer
body से पहले .card-header और इसके बाद .card-footer रखें। Headers nav tabs hold कर सकते हैं, और footers अक्सर timestamps या actions hold करते हैं। Coloured variants के लिए इन पर bg और text utilities इस्तेमाल करें, और पूरे cards के लिए .text-bg-*।
Note:
card-header card-header-tabs के साथ nav-tabs भी hold कर सकता है।
उदाहरण: Card header/footer
<!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 text-center">
<div class="card-header">Featured</div>
<div class="card-body"><h5 class="card-title">Special title</h5><p class="card-text">Supporting text.</p></div>
<div class="card-footer text-body-secondary">2 days ago</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. #}
आम गलतियां
- Header को body के अंदर रखना
- बिना hierarchy के अंदर headings इस्तेमाल करना
- inline CSS से style करना
चैप्टर सारांश
- card-header ऊपर बैठता है
- card-footer नीचे बैठता है
- Utilities से Colour करें
- Headers nav tabs hold कर सकते हैं
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: