Nesting क्या है
आप ज़्यादा complex layouts बनाने के लिए एक column के अंदर columns की एक नई row रख सकते हैं।
In this page:
Syntax
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-6">nested</div>
<div class="col-6">nested</div>
</div>
</div>
</div>Nesting
एक column के अंदर, अपनी columns वाला एक नया .row add करें। Nested row फिर से इसके parent column को बारह हिस्सों में divide करता है, इसलिए widths parent के relative हैं। Nesting sub-layouts के लिए handy है जैसे एक sidebar में cards।
Note:
Nested rows को container नहीं चाहिए।
उदाहरण: Nesting
<!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">
<div class="col-sm-8 bg-light border p-2">
Level 1: col-sm-8
<div class="row mt-2">
<div class="col-6 bg-primary text-white p-2">Level 2: col-6</div>
<div class="col-6 bg-secondary text-white p-2">Level 2: col-6</div>
</div>
</div>
<div class="col-sm-4 bg-light border p-2">Level 1: col-sm-4</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. #}
आम गलतियां
- एक column के अंदर एक container add करना
- यह उम्मीद करना कि nested widths page से relate करेंगी
- बहुत deeply nest करना
चैप्टर सारांश
- एक col के अंदर एक row रखें
- Nested grid का अपना 12 columns है
- कोई container ज़रूरी नहीं
- Widths parent column के relative हैं
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: