Bootstrap Grid System with Examples in Hindi

Bootstrap Grid System

Bootstrap का Grid System website के layout को व्यवस्थित और responsive बनाने का एक important feature है। इसकी मदद से हम webpage को अलग-अलग rows और columns में divide करके content को सही position पर रख सकते हैं।

Bootstrap Grid System खासतौर पर responsive websites बनाने में useful है, क्योंकि एक ही layout को अलग-अलग screen sizes जैसे mobile, tablet, laptop और desktop पर आसानी से adjust किया जा सकता है।

Bootstrap का grid system मुख्य रूप से 12-column layout पर based है। इसका मतलब है कि एक row की available width को कुल 12 हिस्सों में divide किया जाता है और हम अपनी जरूरत के अनुसार इन हिस्सों को अलग-अलग columns को दे सकते हैं।

Bootstrap Grid में मुख्य Structure

Bootstrap Grid का basic structure सामान्यतः इस प्रकार होता है:

• container → पूरे grid को एक suitable width और horizontal spacing देता है।
• row → columns की एक horizontal line बनाता है।
• col या col-* → content के लिए columns बनाता है।

इसे आसान तरीके से ऐसे समझ सकते हैं:

Container → Row → Column → Content

1. Basic Grid Example

सबसे basic Bootstrap Grid में एक container के अंदर row और उसके अंदर columns बनाए जाते हैं। अगर हम केवल col class का use करते हैं, तो Bootstrap available space को columns के बीच automatically divide कर देता है।

यहाँ तीनों columns available row width को लगभग बराबर हिस्सों में divide करेंगे। यानी 12-column system में प्रत्येक column लगभग 4 columns की जगह लेगा।

Basic Grid में इस्तेमाल होने वाली Classes

• container → Grid को contain करता है।
• row → एक नई row बनाता है।
• col → automatic width वाला column बनाता है।

2. Column Size Define करना

अगर हमें columns की width अपने हिसाब से तय करनी हो, तो हम col-* classes का use कर सकते हैं। यहाँ * की जगह 1 से 12 तक कोई number दिया जा सकता है।

उदाहरण के लिए col-4 का मतलब है कि column row की 12-column width में से 4 हिस्से लेगा, जबकि col-8 8 हिस्से लेगा।

यहाँ 4 + 8 = 12 है, इसलिए दोनों columns एक ही row में fit हो जाते हैं।

कुछ Common Column Sizes

• col-12 → पूरी row की width
• col-8 → 12 में से 8 हिस्से
• col-6 → आधी row
• col-4 → 12 में से 4 हिस्से
• col-3 → 12 में से 3 हिस्से

ध्यान रखें कि एक row में columns का total सामान्यतः 12 के हिसाब से बनाया जाता है। यदि total 12 से अधिक हो जाता है, तो extra column अगली line में जा सकता है।

3. Responsive Breakpoints

Bootstrap Grid की सबसे useful features में से एक इसकी responsive breakpoint system है। इसके द्वारा हम अलग-अलग screen sizes के लिए अलग column widths define कर सकते हैं।

Bootstrap में commonly इस्तेमाल होने वाले breakpoints इस प्रकार हैं:

• col-sm-* → Small devices, ≥576px
• col-md-* → Medium devices, ≥768px
• col-lg-* → Large devices, ≥992px
• col-xl-* → Extra Large devices, ≥1200px
• col-xxl-* → Extra Extra Large devices, ≥1400px

उदाहरण के लिए col-sm-6 col-lg-4 का मतलब है कि small screen से ऊपर column 6/12 width लेगा और large screen से ऊपर 4/12 width लेगा।

इस example में:

• Small screen: दोनों columns col-sm-6 होने के कारण 6-6 हिस्से लेंगे।
• Large screen: पहला column 4 और दूसरा column 8 हिस्से लेगा।

इस तरह एक ही HTML structure को अलग-अलग devices के लिए responsive बनाया जा सकता है।

4. Nested Grid

Bootstrap Grid में एक column के अंदर भी एक नई row और columns बनाई जा सकती हैं। इसे Nested Grid कहा जाता है। यह complex layouts बनाने में useful होता है।

उदाहरण के लिए हमारे पास एक col-8 का main column है और उसके अंदर दो col-6 nested columns बनाए जा सकते हैं।

यहाँ outer row में 8 + 4 = 12 है। इसके बाद 8-column वाले area के अंदर एक नई row बनाई गई है, जिसमें दो col-6 columns हैं।

5. Auto Layout Columns

जब columns की exact width define करने की जरूरत नहीं होती, तब केवल col class का use किया जा सकता है। Bootstrap available space को columns के बीच automatically divide कर देता है।

यहाँ चारों columns available space को लगभग बराबर divide करेंगे। यानी 12-column concept में प्रत्येक column लगभग 3 हिस्से के बराबर space लेगा।

6. Offset Columns

Bootstrap में offset का use column के left side में कुछ grid space छोड़ने के लिए किया जाता है। इससे column को आगे shift किया जा सकता है।

उदाहरण के लिए offset-4 का मतलब है कि column से पहले 4 grid spaces का offset रखा जाएगा।

इस example में पहला column 4 grid spaces लेता है और दूसरा column भी 4 spaces लेता है। दूसरे column से पहले offset-4 के कारण 4 spaces खाली रहती हैं।

7. Bootstrap Grid में Gutters

Bootstrap Grid में columns के बीच spacing को gutters कहा जाता है। Bootstrap में gutters को control करने के लिए g-*, gx-* और gy-* जैसी classes का use किया जा सकता है।

• g-3 → horizontal और vertical दोनों directions में gutter spacing।
• gx-3 → केवल horizontal spacing।
• gy-3 → केवल vertical spacing।

Gutters की मदद से columns के बीच content को ज्यादा readable और visually separated बनाया जा सकता है।

8. Practical Responsive Grid Example

Real websites में Grid System का use केवल simple columns बनाने के लिए नहीं, बल्कि complete responsive layout बनाने के लिए किया जाता है। उदाहरण के लिए एक desktop screen पर तीन cards एक row में रखे जा सकते हैं, जबकि छोटी screen पर वही cards एक-दूसरे के नीचे दिखाई दे सकते हैं।

इस example में:

• col-12 → mobile पर card पूरी width लेगा।
• col-md-6 → medium screen पर दो cards एक row में आ सकते हैं।
• col-lg-4 → large screen पर तीन cards एक row में आ सकते हैं।

यही Bootstrap Grid को practical responsive web design में बहुत useful बनाता है।

Bootstrap Grid Classes का Quick Reference

Class	Purpose
container	Grid के लिए main container
row	Columns की row बनाने के लिए
col	Automatic equal-width column
col-6	12 में से 6 हिस्से
col-md-6	Medium breakpoint से 6 हिस्से
col-lg-4	Large breakpoint से 4 हिस्से
offset-4	Column से पहले 4 grid spaces का offset
g-3	Grid gutters के लिए

Bootstrap Grid के फायदे

• Responsive layout बनाना आसान हो जाता है।
• Columns की width को 12-column system के अनुसार आसानी से control किया जा सकता है।
• Mobile, tablet और desktop के लिए अलग-अलग layout define किए जा सकते हैं।
• Nested grid की मदद से complex layouts बनाए जा सकते हैं।
• Offset और gutter classes से spacing और positioning को आसानी से manage किया जा सकता है।
• Custom CSS लिखने की जरूरत कई common layouts में कम हो जाती है।

Bootstrap Grid में ध्यान रखने वाली बातें

• Grid का basic structure समझने के लिए container → row → column pattern याद रखें।
• एक row को 12-column layout के रूप में समझें।
• Exact width चाहिए तो col-* classes का use करें।
• Responsive layout के लिए sm, md, lg, xl और xxl breakpoints का use करें।
• Complex layout में column के अंदर नई row बनाकर nested grid बनाया जा सकता है।
• Columns के बीच spacing के लिए gutter classes useful हैं।

In Short

• Bootstrap Grid System 12-column layout पर based है।
• container grid का main wrapper होता है।
• row columns को एक horizontal structure में रखती है।
• col automatic width वाला column बनाता है।
• col-* से column की width define की जा सकती है।
• col-sm, col-md, col-lg, col-xl, col-xxl responsive layouts बनाने में मदद करते हैं।
• Nested Grid से column के अंदर भी rows और columns बनाए जा सकते हैं।
• Offset column को grid के अंदर आगे shift करने के लिए use होता है।
• Gutters columns के बीच spacing control करने में मदद करते हैं।

Conclusion

Bootstrap Grid System responsive web design का एक important हिस्सा है। इसकी मदद से webpage को rows और columns में divide करके अलग-अलग screen sizes के लिए suitable layout बनाया जा सकता है। अगर आपको container, row, col, 12-column system और responsive breakpoints की basic understanding हो जाए, तो Bootstrap में अलग-अलग types के layouts बनाना काफी आसान हो जाता है।

---

---

---

---

---

---

Quizzes in Hindi

---

---

---