Headings क्या हैं
Bootstrap h1 से h6 style करता है और किसी भी element के लिए matching .h1 से .h6 classes देता है।
In this page:
Syntax
<h1>Heading</h1>
<p class="h3">Looks like h3</p>Headings
h1 से h6 tags को consistent sizes और margins मिलते हैं। जब आपको दूसरे elements पर heading looks चाहिए, .h1 से .h6 इस्तेमाल करें। एक heading के अंदर .small class या एक muted, smaller subtitle के लिए एक small tag से छोटा text add करें।
Note:
Semantic order रखें (h1 फिर h2) और classes से look बदलें।
उदाहरण: Headings
<!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">
<h1>h1. Heading <small class="text-body-secondary">with muted subtitle</small></h1>
<h3>h3. Heading</h3>
<p class="h2">A paragraph styled like h2</p>
<h6>h6. Heading</h6>
</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. #}
आम गलतियां
- सिर्फ size के लिए heading tags चुनना
- heading levels skip करना
- कई h1 elements इस्तेमाल करना
चैप्टर सारांश
- h1 से h6 styled हैं
- .h1 से .h6 किसी भी element को style करते हैं
- Subtitles के लिए small इस्तेमाल करें
- Semantic order रखें
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: