Grid के Basics
Grid एक container, rows, और columns से बनता है जो content को rows में line up करते हैं।
In this page:
Syntax
<div class="container">
<div class="row">
<div class="col">column</div>
<div class="col">column</div>
</div>
</div>Grid Basics
एक container के अंदर एक .row रखें और row के अंदर .col elements। Rows flexbox और negative margins इस्तेमाल करते हैं column gutters offset करने के लिए, और columns padding carry करते हैं। Content हमेशा columns के अंदर रहना चाहिए।
Note:
कभी content सीधे एक row में न रखें; इसे एक col में wrap करें।
उदाहरण: Grid 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="row">
<div class="col bg-primary-subtle border p-2">One</div>
<div class="col bg-success-subtle border p-2">Two</div>
<div class="col bg-warning-subtle border p-2">Three</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. #}
आम गलतियां
- columns को एक row के बाहर रखना
- content सीधे rows में रखना
- container भूल जाना
चैप्टर सारांश
- container > row > col structure इस्तेमाल होता है
- Rows flex containers हैं
- Columns content और gutters hold करते हैं
- Content columns के अंदर जाता है
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: