लेआउटसाठी उपयुक्तता

जलद मोबाइल-अनुकूल आणि प्रतिसादात्मक विकासासाठी, बूटस्ट्रॅपमध्ये सामग्री दाखवणे, लपवणे, संरेखित करणे आणि अंतर ठेवणे यासाठी डझनभर उपयुक्तता वर्ग समाविष्ट आहेत.

बदलत आहेdisplay

मालमत्तेची सामान्य मूल्ये प्रतिसादात्मकपणे टॉगल करण्यासाठी आमच्या प्रदर्शन उपयुक्तता वापरा . displayविशिष्ट व्ह्यूपोर्टवर दर्शविण्यासाठी किंवा लपवण्यासाठी ते आमच्या ग्रिड सिस्टम, सामग्री किंवा घटकांसह मिसळा.

फ्लेक्सबॉक्स पर्याय

Bootstrap 4 flexbox सह तयार केले आहे, परंतु प्रत्येक घटकामध्ये displayबदल केला गेला नाही display: flexकारण यामुळे अनेक अनावश्यक ओव्हरराइड्स जोडले जातील आणि मुख्य ब्राउझर वर्तन अनपेक्षितपणे बदलतील. आमचे बरेचसे घटक flexbox सक्षम असलेले तयार केलेले आहेत.

display: flexतुम्‍हाला एखादे घटक जोडण्‍याची आवश्‍यकता असल्‍यास , असे .d-flexप्रतिसाद देण्‍याच्‍या प्रकारांपैकी एकासह करा (उदा., .d-sm-flex). आकारमान, संरेखन, अंतर आणि अधिकसाठी आमच्या अतिरिक्त फ्लेक्सबॉक्स युटिलिटीजचाdisplay वापर करण्याची परवानगी देण्यासाठी तुम्हाला या वर्गाची किंवा मूल्याची आवश्यकता असेल .

मार्जिन आणि पॅडिंग

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

टॉगल कराvisibility

टॉगल displayकरण्याची आवश्यकता नसताना, तुम्ही आमच्या दृश्यमानता युटिलिटीसहvisibility घटक टॉगल करू शकता . अदृश्य घटक अद्याप पृष्ठाच्या लेआउटवर परिणाम करतील, परंतु ते अभ्यागतांपासून दृष्यदृष्ट्या लपलेले आहेत.