Bootstrap Grid System Kya Hota Hai ? Hello Friends आज इस article में हम जानेंगे की bootstrap grid system होता क्या है ? लेकिन उससे पहले आपको ये पता होना चाहिए की bootstrap क्या होता है। Bootstrap एक ऐसा powerful front-end framework है जिसकी मदद से हम बहुत कम समय में एक responsive website design कर सकते है।
ये websites को fully responsive करने में web designers की help करता है। अगर आपको bootstrap के बारे में पूरी जानकारी चाहिए तो आप ये आर्टिकल read कर सकते है, Bootstrap Kya Hai? | What is Bootstrap in Hindi | Features Of Bootstrap । तो चलिए जानते है की Bootstrap Grid System Kya Hota Hai ?. Bootstrap grid system के बारे में जानने से पहले जान लेते है grid होता है ?
Grid Kya Hai ? ( What is Grid System in Hindi )
Grid को आप ऐसे समझ सकते हो जैसे ये एक type का structure होता है जिसमे आप किसी भी area को horizontal और vertical lines draw करके columns और rows में divide कर सकते है। grid को किसी graph paper पर भी draw किया जा सकता है।
उस area को जिसको हमने columns और rows में divide किया है उसमे हम कुछ content डालते है और उसको height-width देकर manage करते है। website को design करते समय इस तरह से ही grid का use किया जाता है जिससे की website के content को अच्छी तरह से display और properly organize करने में help मिलती है।
Bootstrap Grid System Kya Hota Hai?
Bootstrap page में एक row में 12 अलग-अलग columns होते है। सबसे अच्छी बात ये होती है की ये columns responsive होते हैं मतलब ये columns अलग-अलग screen size के accroding अपने आप को adjust कर लेते है। इसके लिए आपको अलग से code लिखने की जरुरत नहीं होती है।
Bootstrap grid system 3 चीजों से मिलकर बना है :
- Container
- Rows
- Columns
Container कैसे बनाते है ?
Bootstrap में page design करते time उसमे सबसे पहले हम एक container create करते है। container को create करने के लिए एक simple <div> element लेना होता है जिसमे एक class को apply किया जाता है। .container नाम की class को apply किया जाता है। container के अंदर फिर rows और columns को रखा जाता है।
Bootstrap में दो तरह की container classes होती हैं:
- .container
- .container-fluid
Container का use कहाँ किया जाता है ?
.container class का use एक fixed-width design create करने के लिए किया जाता है।
Fixed width container:
<div class="container"></div>
Container-fluid का use कहाँ किया जाता है ?
.container-fluid class का use एक full-width design create करने के लिए किया जाता है।
<div class="container-fluid"></div>
Rows और Columns कैसे बनाते है ?
row create करने के लिए हम उसको container के अंदर लिखते है। एक container के अंदर एक या उससे भी ज्यादा rows को create किया जा सकता है।
Row को create करने के लिए container के अंदर एक <div> लेके .row class का use करेंगे। row create करने के बाद उसके अंदर columns create किये जाते है , फिर उसके अंदर content डाला जाता है। एक row में 12 columns होते है , आप इन 12 columns को divide karke use कर सकते है।
Row:
<div class="container">
<div class="row">
</div>
</div>Column को create करने के लिए Bootstrap में 4 types की classes होती है।
- .col-xs : extra small display ( screen width less than 576px )
- .col-sm : small screen ( width equal and more than 576px )
- .col-md : medium size screen ( width equal and more than 768px)
- .col-lg : large screen ( width equal and more than 992px )
- .col-xl : xlarge device (screen width equal and more than1200px)
medium size screen के लिए single column अगर आपको create करना है और आप चाहते है की उसकी width 12 columns के equal हो तो उसके लिए .col-md-12 class का use होगा।
<div class="container">
<div class="row">
<div class="col-md-12">one column</div>
</div>
</div>2 columns को create करने के लिए हमें .col-md-6 दो columns लेने होंगे।
<div class="container">
<div class="row">
<div class="col-md-6"> Column 1</div>
<div class="col-md-6"> Column 2</div>
</div>
</div>इसी तरह अगर हमको 3 columns create करने है तो हम .col-md-4 class का use करेंगे।
<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>Bootstrap Grid Layout Example:
अलग-अलग Screens के लिए Code कैसे लिखे?
अभी तक हम single screen के लिए single column design कर रहे थे लेकिन जब हम multiple screen size के लिए column create करते है तो उसके लिए अलग se code define करना पड़ता है।
मान लीजिये आपको large screen पर 2 columns चाहिए और small screen पर एक तो उसके लिए आप ये code use करेंगे।
<div class="container-fluid" >
<div class="row">
<div class="col-lg-6 col-sm-12">Column 01</div>
<div class="col-lg-6 col-sm-12">Column 02</div>
</div>
</div>मान लीजिये आपको large screen पर 3 columns चाहिए और small screen पर 1 तो उसके लिए आप ये code use करेंगे।
<div class="container-fluid" >
<div class="row">
<div class="col-lg-4 col-sm-12">Column 01</div>
<div class="col-lg-4 col-sm-12">Column 02</div>
<div class="col-lg-4 col-sm-12">Column 02</div>
</div>
</div>मान लीजिये आपको large screen पर 4 columns चाहिए और small screen पर 2 तो उसके लिए आप ये code use करेंगे।
<div class="container-fluid" >
<div class="row">
<div class="col-lg-3 col-sm-6">Column 01</div>
<div class="col-lg-3 col-sm-6">Column 02</div>
<div class="col-lg-3 col-sm-6">Column 02</div>
<div class="col-lg-3 col-sm-6">Column 02</div>
</div>
</div>आपने क्या जाना ?
इस लेख के जरिये आपने जाना कि Bootstrap Grid System क्या होता है? इसको कैसे use करते है ,कैसे rows और coulmns create कर सकते है। आशा है यह लेख आपके लिए helpful रहा होगा । अगर आपको मन में Bootstrap Grid System से Related किसी भी तरह के कोई भी question है तो आप हमें नीचे comment कर पूछ सकते है।
