Bootstrap Grids

📖 Theory

Phone પર ત્રણ બાજુ બાજુ ખોટું છે

તમારાં FestConnect નાં cards col-4 વાપરે છે, ત્રણ બાજુ બાજુ. Laptop પર એ સંપૂર્ણ છે. Phone પર એક જ હરોળમાં ઠાંસેલાં ત્રણ cards એ વાંચી ન શકાય એવી ટપાલની ટિકિટો છે. તમને એ બદલાય એ જોઈએ છે: phone પર હરોળ દીઠ એક card, tablet પર બે, desktop પર ત્રણ.

સાદું col-4 એ કરી શકતું નથી; એ દરેક પડદા પર ત્રણ બાજુ બાજુ જ છે. Bootstrap નો ઉકેલ છે સ્તંભ સાથે પડદાના માપનું લેબલ જોડવું, જેથી જુદાં માપને જુદી પહોળાઈ મળે.

📖 Theory

નાનેથી શરૂ થઈને ઉપર વધતી સૂચનાઓ

સામાન ભરવાની સલાહ વિચારો: 'મૂળભૂત રીતે થેલી દીઠ એક વસ્તુ; મોટી થેલી હોય તો બે; બહુ મોટી હોય તો ત્રણ'. દરેક નિયમ એક માપે લાગુ પડે છે અને એથી મોટા બધા માટે ટકી રહે છે. Bootstrap બરાબર આ જ રીતે mobile-first છે: પાયાનો નિયમ સૌથી નાના પડદા માટે છે, અને દરેક breakpoint નું લેબલ કહે છે કે 'આ પહોળાઈથી ઉપર, આના પર ફેરવો'.

📖 Theory

Breakpoints અને 'અને ઉપર' નો નિયમ

Breakpoint નું લેબલ col અને આંકડા વચ્ચે બેસે છે:

• *`col-sm-** >=576px, **col-md-` >=768px, `col-lg-** >=992px, **col-xl-`* >=1200px.

col-md-6 નો અર્થ છે 'મધ્યમ પડદા અને એથી ઉપર 6 સ્તંભ રોકો'. એ breakpoint ની નીચે સ્તંભ પૂરી પહોળાઈ પર પાછો જાય છે અને ખડકાય છે. લેબલ વગરનું col-* (જેમ કે col-12) બધા માપ પર લાગુ પડે છે અને એ તમારો mobile નો પાયો છે. દરેક માપે ગોઠવણ બદલવા અનેક લેબલ ખડકો.

⌨️ Practical

એક, બે, ત્રણ વાળાં 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 પહોળાઈએ શું દેખાય છે?

એક card એ class="col-12 col-md-6 col-lg-4" છે. Browser નું window 800px પહોળું છે. Card 12 માંથી કેટલા સ્તંભ રોકે છે, અને હરોળ દીઠ કેટલાં cards બેસે છે? Breakpoint ના આંકડા વાપરીને ગણો.

🧩 Quiz

તમે `col-lg-4` લખો છો પણ કોઈ નાનું લેબલ નહીં. 500px ના phone પર શું થાય છે?

1. સ્તંભ પૂરી પહોળાઈમાં ખડકાય છે, કારણ કે lg ની નીચે કોઈ નિયમ લાગુ પડતો નથી
2. એ ત્રીજા ભાગ (4/12) જ રહે છે, ઠાંસીને ત્રણ બાજુ બાજુ
3. પડદો ઓછામાં ઓછો 992px ન થાય ત્યાં સુધી card અદૃશ્ય રહે છે
4. Bootstrap ભૂલ આપે છે કારણ કે પાયાનું col જરૂરી છે

⚠️ Watch out

Responsive grid ના ફાંદા

1. Breakpoints ને ઊલટા વાંચવા: લેબલનો અર્થ છે 'આ માપ અને એથી ઉપર', 'ફક્ત આ માપ' નહીં. col-md-6 એ lg અને xl પર પણ લાગુ પડે છે, સિવાય કે મોટું લેબલ એને બદલે.

2. col-lg-4 phone પર ત્રણ બાજુ બાજુ હશે એવી અપેક્ષા: lg ની નીચે એ ખડકાય છે. જો તમને નાના પડદાની ચોક્કસ ગોઠવણ જોઈતી હોય, તો પાયો (col-12 કે col-6) સ્પષ્ટ રીતે ગોઠવો.

3. Viewport નું meta tag છોડી દેવું: એના વગર (પરિચયના પાઠમાંનું) breakpoints ક્યારેય ચાલુ થતાં નથી અને phone ઝૂમ થયેલી desktop ની ગોઠવણ દેખાડે છે.

📖 Theory

Bootstrap નો આખો મુદ્દો આ જ છે

Responsive સ્તંભો એ જ કારણ છે જેના માટે તમે પહેલાં Bootstrap જોડ્યું હતું: classes નો એક સમૂહ, અને FestConnect હાથે લખેલી media queries વગર phone થી desktop સુધી ફરી ગોઠવાય છે. હવે પછીનો પાઠ, themes, એ જ ઘટકો કેવા દેખાય છે એ બદલે છે (રંગ અને અક્ષરો), એ કેવી રીતે ગોઠવાય છે એ નહીં. ગોઠવણ પતી; હવે શણગાર.

✅ Summary

Key takeaways

• સ્તંભમાં breakpoint નું લેબલ ઉમેરો: col-sm/md/lg/xl-N.
• લેબલનો અર્થ છે 'આ પહોળાઈ અને ઉપર'; એની નીચે સ્તંભ પૂરી પહોળાઈમાં ખડકાય છે (mobile-first).
• Breakpoints: sm >=576, md >=768, lg >=992, xl >=1200px.
• દરેક માપે ગોઠવણ બદલવા લેબલ ખડકો: col-12 col-md-6 col-lg-4 = 1, 2, 3 વાળું.
• લેબલ વગરનું col-N બધા માપ પર લાગુ પડે છે અને એ તમારો mobile નો પાયો છે; viewport નું meta tag હાજર હોવું જ જોઈએ.
• Memory hook: નાનેથી શરૂ થઈને ઉપર વધતા નિયમો.