Bootstrap 5 Grid System In Hindi : Website के Layouts को Create करना एक बहुत ही जटिल काम है। जब Web को Introduced किया गया था , तो हमारे पास Layouts को Design करने के लिए कोई Specific Methods नहीं थे , सिर्फ Tables के Through Design तैयार किया जाता था।
कुछ सालों बाद HTML Tags और Tools के साथ divs आए जिनकी Help से हम Decent Boxy Website Layouts बना सकते है। फिर, जैसे-जैसे Technology आगे बढ़ी, Responsive Website Design का Idea Introduced किया गया।
सबसे Powerful और Awesome Web Layouts Create करने के लिए Bootstrap use होता है ,जो की Most Popular Front-end Frameworks में से एक है। Responsive Projects को Develop करने के लिए Bootstrap हमेशा In-demand Potent Framework रहा है।
Bootstrap एक Responsive , Mobile-first fluid Grid System Offer करता है ,जो की Screen or Viewport Size में 12 Columns को Adequately Scales Up करता है।Bootstrap 5 Recently ही Release किया गया है , इसमें कुछ Additional Classes हैं जिन्हें हमने Layout System से Add किया है। इस Article में हम आपको Bootstrap के New Version के Concept के बारे में बताएंगे और साथ में Bootstrap 5 Grid System In Hindi के बारे में बताएंगे
Concept Of The New Version Of Bootstrap
Virtual Grid Foundation के लिए बहुत सारे Efforts के साथ, Tables का Use करके भी कोई सफलता नहीं मिली है, जो Especially इसकी Horizontal Range Inflexibility के कारण Smaller Viewports के लिए Scaling को Impossible कर देता है।
जब divs को लाया गया , तो Grid जैसे System Provide करने के लिए CSS का Use करना Possible हो गया तो ये Bootstrap के साथ साथ हर CSS Frameworks का Basic Premise बन गया।
बूटस्ट्रैप एक web page पर horizontal grid के साथ by default एक canvas की तरह होता है जहां Screen size increases होने पर elements को एक particular viewport control में रखा जाता है।
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
....
</html>ऊपर दिए गए Responsive Meta Viewport Tag को Use करने का मतलब है कि Browser Webpage की Width को Viewport के Size के साथ Display करेगा। जैसे Webpage Currently Show हो रहा है।
Bootstrap 5 Grid System In Hindi
- Containers
- Rows
- Columns
- Responsive Columns
- Row Columns
- Offset Columns
- Gutters
- Grid in a Nutshell
Containers
Bootstrap अपने Grid System के Basis के में तौर पर Container Elements का Use करता है। Containers का Use हम कई बार कर सकते है। यहाँ पर Three Types के Container Class हैं जिनका Use हम कर सकते हैं: .container, .container-fluid और responsive container.
.Container class एक Centered Responsive Pixel Grid Layout Create करने में Help करता है, जबकि container-fluid सभी V iewport Sizes में एक Full-width Layout Provide करता है। Responsive Container बस एक Responsive Container को Create करता है , जिसकी Width 100% होती है जब तक कोई Specified Breakpoint न आये।
<div class="container">.container</div>
<div class="container-fluid">.container-fluid</div>
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div><div class="container">.container</div>
<div class="container-fluid">.container-fluid</div>
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div><div class="container">.container</div>
<div class="container-fluid">.container-fluid</div>
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>ऊपर दिए गए Containers को double extra-large screen resolution पर कुछ इस तरह दिखना चाहिए:
Rows
अगर आप Bootstrap grid system को Use कर रहे है तो उसके लिए आपको At Least एक Row Create करनी होगी column के अंदर। हर एक container class में एक या अधिक Rows हो सकती हैं, जिनके अंदर आप और भी Rows Create कर सकते है।
Bootstrap Row एक Group है Horizontal Bootstrap columns का जिसको 12 Parts में Divide किया जाता है।
<div class="container">
<div class="row">
<!-- insert column code here -->
</div>
</div>ऊपर दिया हुआ Code सिर्फ एक Row Create करने के लिए है , इसमें आप एक से ज्यादा या उससे भी अधिक Rows Create कर सकते है। एक से ज्यादा Rows को Create करने के लिए आप नीचे दिया हुआ Code Use कर सकते है।
<div class="container">
<div class="row">
<!-- insert column code here -->
</div>
<div class="row">
<!-- insert column code here -->
</div>
<div class="row">
<!-- insert column code here -->
</div>
</div>Columns
- Extra small (xs) : max-width 575 pixels
- Small (sm) : greater than or equal to 576 pixels & smaller than 768 pixels.
- Medium (md) : greater than or equal to 768 pixels & smaller than 992 pixels.
- Large (lg) : larger than equal to 992 pixels & smaller than 1200 pixels.
- Extra large (xl) : larger than equal to 1200 pixels & smaller than 1140 pixels.
- Extra extra large (xxl) : greater than or equal to 1400 pixels.
For Example : हम एक Simple Responsive three-column Layout Create करके दिखाते है, तो चलिए देखते है वो कैसे दिखेगा।
<div class="container">
<div class="row">
<div class="col-md-4">
Column 1</div>
<div class="col-md-4">
Column 2</div>
<div class="col-md-4">
Column 3
</div>
</div>
</div>जैसा की आप ऊपर Code में देख सकते है की हमने एक Row ली है और उसके अंदर Div का Use करके .col-md-4 की class दी है। इस तरह से आप एक Row में 3 columns को Create कर सकते है।
Responsive Columns
अगर आप एक ऐसा Column Create करना चाहते है जो की सबसे छोटे से सबसे बड़े Device/Viewport तक हो , तो आप आप .col या .col- * class का Use कर सकते है। इसका मतलब ये होता है कि आप Screen Resolution को चाहे जितना बढ़ाएं या घटाएं, आपके column के Size आपके Defined Column Size के According ही रहेंगे।
चलिए एक Example के जरिये समझते है , दो Row को Use करके एक Layout बनाते है। First Row में 3 Column लेंगे col Class का Use करके और Second Row में हम लेंगे 3 columns .col-3, .col-6 and .col-3 Classe का Use करेंगे।
<div class="container">
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
<div class="row">
<div class="col-3">Column 3/12</div>
<div class="col-6">Column 6/12</div>
<div class="col-3">Column 3/12</div>
</div>
</div>इसका Result कुछ ऐसा होगा :
Row Columns
बूटस्ट्रैप आपको .row-cols- * class का Use करके हर एक content को Display कराने के लिए columns को Set करने की Ability भी देता है। As an example, चलिए दो rows का एक layout बनाते है six equal-size columns के साथ। इसमें हमको एक .row-cols-3 class add करनी होगी।
<div class="container">
<div class="row row-cols-3">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
<div class="col">Column 4</div>
<div class="col">Column 5</div>
<div class="col">Column 6</div>
</div>
</div>इसका Result कुछ ऐसा होगा :
Offset Columns
कभी कभी आपको Layout में कुछ Offset Columns की जरूरत पड़ती होगी ,और आपके Element से पहले या बाद में कुछ Horizontal Blank Space होता होगा।
Bootstrap 5 ऐसा करने के लिए दो तरीके provide करता है। पहला है Responsive .offset-–( widths of the media queries) और दूसरा (offset करने के लिए columns की संख्या ) Grid Classes और दूसरा Margin Utilities का Use करके जैसे .ms-auto एक column को दूसरे column से दूर करने के लिए।
चलिए देखते है कैसे .offset-– class काम करती है।
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
</div>जैसा कि ऊपर दिए गए Code में देखा गया है, हमने .col-md-4 Class का Use किया है First .row के First Column में उसके बाद दूसरे कॉलम col-md-4 offset-md-4 class का उपयोग किया है। आप देख सकते है दूसरे Coulmn ने Space ले लिया है। उसके बाद दूसरे Row में हमने दोनों Columns में col-md-3 offset-md-3 इन Class का Use किया है।
अब देखते है की Margin Utilities का Use करके Same चीज़ कैसे आएगी। ये कैसा देखेगा !
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
</div>
</div>First Row में हमने .ms-auto की Class का Use किया है Second Div Column में , “m” का मतलब होता है Margin , और “s” का Use होता है margin-left and margin-right को set करने के लिए। “auto” शब्द का अर्थ है कि हम auto margin सेट कर रहे हैं जो कि .col-md-4 को Grid के End तक खींच लेगा।
Second Row में हमने .ms-md-auto Class का Use किया है। “m” का मतलब होता है Margin , और “s” का Use होता है margin-left and margin-right को set करने के लिए। “Md” Word का मतलब है Breakpoint ,जहां column 100% max-Width पर Set होगा।
इसका Result कुछ ऐसा होगा :
Gutters
Bootstrap 5 आपके Columns के बीच में Padding Add करने के लिए Predefined Gutter Classes Provide करता है, जो की Space और Content को Align करने के लिए Use किया जाता है। Gutters column और Content के बीच का Gap होता है , जिन्हें Responsively Adjusted किया जा सकता है ,और Specifically Horizontal Padding के Through बनाया जाता है।
जब Bootstrap Gutters का Use करे , तो ये कुछ Classes हैं जिनका याद रखना चाहिए :
- .gx-* : इस Class का Use Mainly Horizontal Gutter Widths को Control करने के लिए किया जाता है।
- .gy-* : इस Class का Use Mainly Vertical Gutter Widths को Control करने के लिए किया जाता है।
- .g-* : इस Class का Use Mainly Horizontal and Vertical Gutter Widths दोनों को Control करने के लिए किया जाता है।
- .g-0 : ये Class Predefined Grid Classes और Negative Margins को Remove करती है ,जिसमें .row Class और Horizontal Padding होती है Related Columns की।
<div class="container">
<div class="row gx-5">
<div class="col">
<div class="p-3 border">Horizontal Gutter</div>
</div>
<div class="col">
<div class="p-3 border">Horizontal Gutter</div>
</div>
<div class="col">
<div class="p-3 border">Horizontal Gutter</div>
</div>
</div>
</div>
<div class="container">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border">Vertical Gutter</div>
</div>
<div class="col-6">
<div class="p-3 border">Vertical Gutter</div>
</div>
<div class="col-6">
<div class="p-3 border">Vertical Gutter</div>
</div>
<div class="col-6">
<div class="p-3 border">Vertical Gutter</div>
</div>
</div>
</div>
<div class="container">
<div class="row g-3">
<div class="col-6">
<div class="p-3 border">V & H Gutter</div>
</div>
<div class="col-6">
<div class="p-3 border">V & H Gutter</div>
</div>
<div class="col-6">
<div class="p-3 border">V & H Gutter</div>
</div>
<div class="col-6">
<div class="p-3 border">V & H Gutter</div>
</div>
</div>
</div>
<div class="container ">
<div class="row g-0">
<div class="col-3">
<div class="p-3 border">No Gutter</div>
</div>
<div class="col-9">
<div class="p-3 border">No Gutter</div>
</div>
</div>
</div>इसका Result कुछ ऐसा होगा :
Grid in a Nutshell
किसी भी Bootstrap website का Main Concept Layout or Grid Component होते है। Bootstrap Grid System में 12 Equal-Width वाले Columns होते हैं। इसके Predefined Classes का उपयोग करते हुए, आप Columns Create करते है, और एक बार में कई Column Create कर सकते है।
ये कुछ Helpful Points है जो आपको पता होने चाहिए Grid Layout का Use करते Time .
- हर एक (.row) एक container (.container, .container-fluid या responsive container ) में ही होनी चाहिए।
- हर एक Row को Multiple Elements को साथ में रखने के लिए Horizontally Use किया जा सकता है।
- हर एक Column को Row के अंदर रखा जाता है , तभी Column काम करता है।
Bootstrap’s grid एक Powerful और Fully Responsive Grid System है, जो कई Devices और Screen Resolutions के साथ Use करने और Compatible करने के लिए Designe की गई है। Basic knowledge के साथ अपना खुद का Layout Create करना आसान है।
