12-Column Grid सिस्टम
हर row को बारह बराबर हिस्सों में divide किया जाता है, और columns इनमें से कुछ हिस्से claim करते हैं।
In this page:
Syntax
<div class="row">
<div class="col-4">one third</div>
<div class="col-8">two thirds</div>
</div>12-Column Grid
col-4 जैसी एक class बारह में से चार columns लेती है (one third)। एक row में columns जो बारह से ज़्यादा add up हों वे एक नई line पर wrap हो जाती हैं। 8 और 4 जैसे widths combine करना, या 3 तीन बार और फिर 3, आपको कोई भी layout बनाने देता है।
Note:
12, 2, 3, 4, और 6 से evenly divide होता है, यही वजह है इसे इस्तेमाल किया जाता है।
उदाहरण: 12-column grid
<!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 text-center">
<div class="row mb-2"><div class="col-8 bg-primary text-white">col-8</div><div class="col-4 bg-secondary text-white">col-4</div></div>
<div class="row mb-2"><div class="col-3 bg-info">3</div><div class="col-3 bg-info">3</div><div class="col-3 bg-info">3</div><div class="col-3 bg-info">3</div></div>
<div class="row"><div class="col-6 bg-success text-white">6</div><div class="col-6 bg-success text-white">6</div><div class="col-6 bg-danger text-white">wraps (6+6+6 > 12)</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. #}
आम गलतियां
- accidentally widths को 12 से ज़्यादा add up कराना
- बिना classes के unequal widths की उम्मीद करना
- यह भूल जाना कि columns wrap होते हैं
चैप्टर सारांश
- प्रति row बारह columns
- col-N 12 में से N लेता है
- Extra columns wrap होते हैं
- 12 halves, thirds, quarters में split होता है
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: