लेआउट के लिए उपयोगिताएँ

बदलनाdisplay

संपत्ति के सामान्य मूल्यों को प्रतिक्रियात्मक रूप से टॉगल करने के लिए हमारी प्रदर्शन उपयोगिताओं का उपयोग करें। displayविशिष्ट व्यूपोर्ट में उन्हें दिखाने या छिपाने के लिए इसे हमारे ग्रिड सिस्टम, सामग्री या घटकों के साथ मिलाएं।

फ्लेक्सबॉक्स विकल्प

बूटस्ट्रैप फ्लेक्सबॉक्स के साथ बनाया गया है, लेकिन हर तत्व displayको नहीं बदला गया है display: flexक्योंकि यह कई अनावश्यक ओवरराइड जोड़ देगा और अप्रत्याशित रूप से प्रमुख ब्राउज़र व्यवहार को बदल देगा। हमारे अधिकांश घटक फ्लेक्सबॉक्स सक्षम के साथ बनाए गए हैं।

यदि आपको किसी तत्व में जोड़ने की आवश्यकता है display: flex, तो ऐसा .d-flexया किसी एक प्रतिक्रियाशील प्रकार (जैसे, .d-sm-flex) के साथ करें। साइज़िंग, अलाइनमेंट, स्पेसिंग आदि के लिए displayहमारी अतिरिक्त फ्लेक्सबॉक्स उपयोगिताओं के उपयोग की अनुमति देने के लिए आपको इस वर्ग या मूल्य की आवश्यकता होगी ।

मार्जिन और पैडिंग

तत्वों और घटकों को कैसे स्थान और आकार दिया जाता है, इसे नियंत्रित करने के लिए marginऔर padding रिक्ति उपयोगिताओं का उपयोग करें । 1remबूटस्ट्रैप में मान डिफ़ॉल्ट $spacerचर के आधार पर स्पेसिंग उपयोगिताओं के लिए छह-स्तरीय पैमाना शामिल है । सभी व्यूपोर्ट के लिए मान चुनें (उदाहरण के .me-3लिए margin-right: 1rem, एलटीआर में), या विशिष्ट व्यूपोर्ट को लक्षित करने के लिए प्रतिक्रियाशील वेरिएंट चुनें (उदाहरण के .me-md-3लिए , एलटीआर margin-right: 1remमें- ब्रेकपॉइंट से शुरू md)।

टॉगलvisibility

जब टॉगल करने की आवश्यकता नहीं होती है, तो आप हमारी दृश्यता उपयोगिताओं के साथ किसी तत्व को displayटॉगल कर सकते हैं । अदृश्य तत्व अभी भी पृष्ठ के लेआउट को प्रभावित करेंगे, लेकिन आगंतुकों से दृष्टिगत रूप से छिपे हुए हैं।visibility