Theory
एक phone पर three-across ग़लत है
आपके FestConnect cards col-4 इस्तेमाल करते हैं, three across। एक laptop पर यह perfect है। एक phone पर, एक row में ठुँसे तीन cards बिना पढ़े जा सकने वाले postage stamps हैं। आप चाहते हैं वे बदलें: एक phone पर एक card प्रति row, एक tablet पर दो, एक desktop पर तीन।
सादा col-4 यह नहीं कर सकता; यह हर screen पर three-across है। Bootstrap का fix column में एक screen-size label जोड़ना है, ताकि अलग-अलग sizes को अलग-अलग widths मिलें।
Theory
Instructions जो छोटी शुरू होती हैं और scale up होती हैं
Packing advice सोचिए: 'default रूप से, एक bag में एक item; अगर आपके पास बड़ा bag है, दो; अगर बहुत बड़ा, तीन'। हर rule एक size पर kick in करता है और हर बड़ी size के लिए रहता है। Bootstrap exactly इसी तरह mobile-first है: base rule सबसे छोटी screen के लिए है, और हर breakpoint label कहता है 'इस width से ऊपर, इस पर switch कीजिए'।
Theory
Breakpoints और 'and up' rule
एक breakpoint label col और number के बीच बैठता है:
- *`col-sm-
** >=576px, **col-md-` >=768px, `col-lg-** >=992px, **col-xl-`* >=1200px।
col-md-6 का मतलब है 'medium screens और उससे ऊपर पर 6 columns span कीजिए'। उस breakpoint से नीचे column full width और stack पर वापस चला जाता है। एक बिना label वाला col-* (जैसे col-12) सभी sizes पर लागू होता है और आपका mobile base है। हर size पर layout बदलने के लिए कई labels stack कीजिए।
Practical
One-up, two-up, three-up cards
<div class="row">
<!-- phone: full width (12). tablet: half (6). desktop: third (4). -->
<div class="col-12 col-md-6 col-lg-4">Robotics</div>
<div class="col-12 col-md-6 col-lg-4">Dance</div>
<div class="col-12 col-md-6 col-lg-4">Coding</div>
</div>
<!-- reading it:
col-12 -> mobile base: 1 per row
col-md-6 -> >=768px: 2 per row
col-lg-4 -> >=992px: 3 per row -->This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
800px width पर क्या दिखता है?
एक card class="col-12 col-md-6 col-lg-4" है। Browser window 800px चौड़ी है। Card 12 में से कितने columns लेता है, और एक row में कितने cards फिट होते हैं? Breakpoint numbers से काम करके निकालिए।
Show the answer
800px >=768px (md) है पर <992px (lg), तो md rule सबसे बड़ा है जो लागू होता है: col-md-6। Card 12 में से 6 columns लेता है, तो प्रति row 2 cards। 500px पर यह col-12 base इस्तेमाल करेगा (प्रति row 1); 1000px पर यह col-lg-4 इस्तेमाल करेगा (प्रति row 3)। Mobile-first का मतलब है आप सबसे बड़े matching label से नीचे की तरफ़ पढ़ते हैं।
Quiz
आप `col-lg-4` लिखते हैं पर कोई छोटा label नहीं। एक 500px phone पर क्या होता है?
- Column full width पर stack हो जाता है, क्योंकि lg से नीचे कोई rule लागू नहीं होता
- यह एक third (4/12) रहता है, cramped three-across
- Card ग़ायब हो जाता है जब तक screen कम से कम 992px न हो
- Bootstrap error देता है क्योंकि एक base col ज़रूरी है
Show the answer
Column full width पर stack हो जाता है, क्योंकि lg से नीचे कोई rule लागू नहीं होता
col-lg-4 सिर्फ़ 992px से ऊपर लागू होता है। उससे नीचे कोई column rule नहीं है, तो यह mobile-first default पर वापस चला जाता है: full width, एक प्रति row stacked (A)। यह lg से नीचे third width नहीं रखता (B), न ही ग़ायब होता है (C), और कोई base class strictly ज़रूरी नहीं (D)। यही वजह है col-lg-4 अकेला भी phones पर reasonably behave करता है: यह बस stack हो जाता है।
Watch out
Responsive grid traps
1. Breakpoints को उल्टा पढ़ना: labels का मतलब है 'यह size और ऊपर', 'सिर्फ़ यह size' नहीं। col-md-6 lg और xl पर भी लागू होता है जब तक एक बड़ा label इसे override न करे।
2. एक phone पर col-lg-4 को three-across की उम्मीद करना: lg से नीचे यह stack हो जाता है। अगर आपको एक specific small-screen layout चाहिए, base (col-12 या col-6) explicitly set कीजिए।
3. viewport meta tag skip करना: इसके बिना (intro lesson से) breakpoints कभी trigger नहीं होते और phone zoomed out desktop layout दिखाता है।
Theory
यही Bootstrap का पूरा point है
Responsive columns वही वजह हैं जिसके लिए आपने सबसे पहले Bootstrap link किया, एक set classes का, और FestConnect बिना हाथ से लिखी media queries के phone से desktop तक reflow करता है। अगला lesson, themes, बदलता है वे same components कैसे दिखते हैं (colours और fonts) न कि वे कैसे layout होते हैं। Layout हो गया; styling अगली है।
Summary
Key takeaways
- Column में एक breakpoint label जोड़िए: col-sm/md/lg/xl-N।
- एक label का मतलब है 'यह width और ऊपर'; उससे नीचे column full width stack होता है (mobile-first)।
- Breakpoints: sm >=576, md >=768, lg >=992, xl >=1200px।
- हर size पर layout बदलने के लिए labels stack कीजिए: col-12 col-md-6 col-lg-4 = 1-up, 2-up, 3-up।
- एक बिना label वाला col-N सभी sizes पर लागू होता है और आपका mobile base है; viewport meta tag मौजूद होना ज़रूरी है।
- Memory hook: rules जो छोटी शुरू होती हैं और scale up होती हैं।