Mobile View Extension का आइकन Mobile View Extension
Chrome
← सभी लेख

Bootstrap breakpoints और grid system: रिस्पॉन्सिव डिज़ाइन आसान भाषा में

Bootstrap 5 के breakpoints, container की चौड़ाई और रिस्पॉन्सिव grid classes, साथ में Sass mixins, display utilities और इन्हें बदलने व टेस्ट करने का तरीका।

Bootstrap 5 में छह रिस्पॉन्सिव लेवल हैं: extra small (576 px से कम), sm (576 px और उससे ऊपर), md (768 px), lg (992 px), xl (1200 px) और xxl (1400 px)। हर रिस्पॉन्सिव class इन्हीं नामों का इस्तेमाल करती है, इसलिए col-md-6 का मतलब है “768 px से ऊपर आधी चौड़ाई” और d-lg-none का मतलब है “992 px से ऊपर छिपा हुआ”। Tailwind की तरह Bootstrap भी mobile first है: बिना breakpoint वाली classes हर साइज़ पर लागू होती हैं, और breakpoint वाली classes उस चौड़ाई से ऊपर लागू होती हैं।

Bootstrap 5 के breakpoints और container की चौड़ाई

Breakpoint Class infix कहाँ से लागू .container की अधिकतम चौड़ाई
Extra small कोई नहीं 0 100%
Small sm 576 px 540 px
Medium md 768 px 720 px
Large lg 992 px 960 px
Extra large xl 1200 px 1140 px
Extra extra large xxl 1400 px 1320 px

ये वही डिफ़ॉल्ट वैल्यू हैं जो Bootstrap breakpoints डॉक्यूमेंटेशन में दी गई हैं। .container-fluid हमेशा पूरी चौड़ाई में रहता है, जबकि .container-md (और बाक़ी infix वाले container) अपने breakpoint तक पूरी चौड़ाई में रहते हैं और उसके बाद तय चौड़ाई ले लेते हैं।

रिस्पॉन्सिव grid असल में कैसे काम करता है

Bootstrap के grid में 12 कॉलम होते हैं। आप तय करते हैं कि हर breakpoint पर कोई एलिमेंट कितने कॉलम लेगा:

<div class="container">
  <div class="row g-4">
    <div class="col-12 col-md-6 col-lg-4">Card</div>
    <div class="col-12 col-md-6 col-lg-4">Card</div>
    <div class="col-12 col-md-6 col-lg-4">Card</div>
  </div>
</div>

इससे फ़ोन पर हर लाइन में एक कार्ड, 768 px से दो और 992 px से तीन कार्ड दिखते हैं। col-12 को छोड़ा भी जा सकता है, क्योंकि row के अंदर बिना साइज़ वाला कॉलम वैसे भी फैल जाता है, लेकिन लिखने से इरादा साफ़ रहता है।

एक जैसे आइटम वाले grid के लिए row columns छोटा तरीका है:

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-3">

किसी breakpoint पर कंटेंट का क्रम बदलना हो तो order classes इस्तेमाल करें, जैसे order-first order-md-0। यह तब काम आता है जब फ़ोन पर इमेज हेडिंग के बाद आनी चाहिए, लेकिन डेस्कटॉप पर उसके बगल में।

रिस्पॉन्सिव utilities जो बार-बार काम आएँगी

  • Display: d-none d-md-block फ़ोन पर छिपाता है और 768 px से दिखाता है; d-lg-none 992 px से छिपाता है।
  • Flex direction: flex-column flex-md-row फ़ोन पर एलिमेंट को ऊपर-नीचे रखता है और md से एक लाइन में।
  • Spacing: p-3 p-lg-5 से छोटी स्क्रीन पर padding कम रहती है।
  • Text alignment: text-center text-md-start।
  • Navbar: navbar-expand-lg 992 px से पूरा मेन्यू दिखाता है और उससे नीचे toggler बटन।
  • Tables: चौड़ी टेबल को .table-responsive में रखें ताकि वह अपने ही बॉक्स में स्क्रॉल हो।
  • Images: .img-fluid से max-width: 100% और height: auto सेट हो जाते हैं।

Sass में media query mixins

अगर आप Bootstrap को Sass से कंपाइल करते हैं, तो पिक्सेल की वैल्यू सीधे लिखने के बजाय उसके mixins इस्तेमाल करें:

.hero {
  padding: 2rem 1rem;

  @include media-breakpoint-up(lg) {
    padding: 5rem 2rem;
  }
}

@include media-breakpoint-down(md) { /* below 768px */ }
@include media-breakpoint-between(md, xl) { /* 768px to 1199.98px */ }
@include media-breakpoint-only(md) { /* 768px to 991.98px */ }

ध्यान दें कि Bootstrap 5 में media-breakpoint-down(md) का मतलब क्या है: यह md breakpoint से कम चौड़ाई को टारगेट करता है और max-width: 767.98px के रूप में कंपाइल होता है। .98 इसलिए है ताकि हाई-डेंसिटी स्क्रीन पर दशमलव वाली चौड़ाई में दो नियम आपस में न टकराएँ। Bootstrap 4 में यही mixin अगले breakpoint तक जाता था, और अपग्रेड करते समय लोग अक्सर इसी में फँसते हैं।

Bootstrap breakpoints बदलना

Bootstrap import करने से पहले Sass maps बदलें:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  xxl: 1536px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1200px,
  xxl: 1440px
);

@import "bootstrap/scss/bootstrap";

keys को बढ़ते क्रम में रखें और xs: 0 को न हटाएँ। क्या इन्हें बदलना ज़रूरी है? सिर्फ़ तब, जब आपके डिज़ाइन के पास इसकी कोई ठोस वजह हो। रिस्पॉन्सिव breakpoints गाइड में बताया गया है कि डिवाइस की लिस्ट के बजाय अपने कंटेंट के हिसाब से चौड़ाई कैसे चुनें।

Bootstrap रिस्पॉन्सिव डिज़ाइन की आम ग़लतियाँ

  • फ़ोन के लिए col-6। 360 px की स्क्रीन पर दो कॉलम में gutter के बाद हर कॉलम को लगभग 160 px मिलते हैं; टेक्स्ट और बटन शायद ही उसमें आते हैं।
  • Navbar का breakpoint भूल जाना। ज़्यादा आइटम वाला navbar अगर navbar-expand-md पर है, तो 768 से 992 px के बीच बाहर निकल सकता है।
  • मोबाइल पर d-none से कंटेंट छिपाना, उसे दोबारा व्यवस्थित करने के बजाय। Google मोबाइल पेज को इंडेक्स करता है।
  • अपनी media queries में अलग वैल्यू डालना, जिससे कंपोनेंट 768 px पर बदलते हैं लेकिन आपकी CSS 760 px पर।

Bootstrap लेआउट को टेस्ट करना

हर लेवल को उसकी ठीक चौड़ाई पर और उससे 1 px कम पर जाँचें: 575/576, 767/768, 991/992, 1199/1200 और 1399/1400। Chrome DevTools में device toolbar का Show media queries विकल्प breakpoints को क्लिक करने लायक़ पट्टियों के रूप में दिखाता है।

फिर नाम वाले फ़ोन पर उनके user agent और pixel ratio के साथ जाँचें। मोबाइल व्यू एक्सटेंशन यह एक बटन से करता है। पूरा तरीका रिस्पॉन्सिव डिज़ाइन कैसे टेस्ट करें में है।

अक्सर पूछे जाने वाले सवाल

Bootstrap 5 के breakpoints कौन-से हैं?

576 px (sm), 768 px (md), 992 px (lg), 1200 px (xl) और 1400 px (xxl), और 576 px से नीचे एक बिना नाम का extra-small लेवल।

Bootstrap में col-md-6 का क्या मतलब है?

एलिमेंट md breakpoint (768 px) से ऊपर 12 में से 6 कॉलम, यानी row की आधी चौड़ाई लेता है। 768 px से नीचे यह पूरी चौड़ाई लेता है, जब तक कोई दूसरी class कुछ और न कहे।

क्या Bootstrap mobile first है?

हाँ। बिना breakpoint वाली classes हर स्क्रीन साइज़ पर लागू होती हैं, और breakpoint वाली classes उस चौड़ाई से ऊपर उन्हें बदल देती हैं।

अपनी अगली वेबसाइट को मोबाइल व्यू में देखें।

मोबाइल व्यू Chrome एक्सटेंशन जोड़ें और जिस टैब पर आप काम कर रहे हैं, उसी के डिवाइस प्रीव्यू खोलें।

Chrome में जोड़ें