Container के प्रकार
Containers वे boxes हैं जो आपका content centre करते हैं और control करते हैं कि यह कितना wide हो सकता है।
In this page:
Syntax
<div class="container">...</div>
<div class="container-fluid">...</div>
<div class="container-md">...</div>Container Types
.container एक fixed-width box है जो हर breakpoint पर बदलता है, .container-fluid पूरी width span करता है, और .container-md (या sm, lg, xl, xxl) उस breakpoint तक fluid है। Containers horizontal padding भी add करते हैं, और grids को एक के अंदर रहना ज़रूरी है।
Note:
Full-width layouts के लिए container-fluid और centred content के लिए container इस्तेमाल करें।
उदाहरण: Container types
<!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 bg-primary-subtle border p-2 mb-3">.container (fixed widths)</div>
<div class="container-fluid bg-success-subtle border p-2 mb-3">.container-fluid (always full width)</div>
<div class="container-md bg-warning-subtle border p-2">.container-md (fluid below 768px)</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. #}
आम गलतियां
- containers को एक-दूसरे के अंदर nest करना
- किसी container के बाहर एक row रखना
- यह उम्मीद करना कि container-fluid centred होगा
चैप्टर सारांश
- .container की प्रति breakpoint fixed widths हैं
- .container-fluid हमेशा 100% है
- .container-{breakpoint} उस size तक fluid है
- Rows containers के अंदर जाती हैं
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: