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

तेजी से मोबाइल के अनुकूल और उत्तरदायी विकास के लिए, बूटस्ट्रैप में सामग्री दिखाने, छिपाने, संरेखित करने और अंतर करने के लिए दर्जनों उपयोगिता वर्ग शामिल हैं।

बदलनाdisplay

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

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

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

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

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

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

टॉगलvisibility

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