तीन बराबर कॉलम

तीन समान-चौड़ाई वाले कॉलम डेस्कटॉप से ​​शुरू करें और बड़े डेस्कटॉप पर स्केलिंग करें । मोबाइल डिवाइस, टैबलेट और उसके नीचे के कॉलम स्वचालित रूप से स्टैक हो जाएंगे।

.col-md-4
.col-md-4
.col-md-4

तीन असमान स्तंभ

डेस्कटॉप पर शुरू होने वाले तीन कॉलम प्राप्त करें और विभिन्न चौड़ाई के बड़े डेस्कटॉप तक स्केलिंग करें । याद रखें, ग्रिड कॉलम को एक क्षैतिज ब्लॉक के लिए बारह तक जोड़ना चाहिए। इससे भी अधिक, और कॉलम व्यूपोर्ट की परवाह किए बिना स्टैकिंग करना शुरू कर देते हैं।

.col-md-3
.col-md-6
.col-md-3

दो कॉलम

डेस्कटॉप पर शुरू होने वाले और बड़े डेस्कटॉप पर स्केलिंग करने वाले दो कॉलम प्राप्त करें ।

.col-md-8
.col-md-4

पूरी चौड़ाई, सिंगल कॉलम

पूर्ण-चौड़ाई वाले तत्वों के लिए कोई ग्रिड वर्ग आवश्यक नहीं है।


दो नेस्टेड स्तंभों के साथ दो स्तंभ

दस्तावेज़ीकरण के अनुसार, नेस्टिंग करना आसान है—बस मौजूदा कॉलम में कॉलम की एक पंक्ति डालें। यह आपको डेस्कटॉप से ​​शुरू होने वाले और बड़े डेस्कटॉप पर स्केलिंग करने वाले दो कॉलम देता है, बड़े कॉलम के भीतर अन्य दो (समान चौड़ाई) के साथ।

मोबाइल डिवाइस के आकार, टैबलेट और डाउन पर, ये कॉलम और उनके नेस्टेड कॉलम स्टैक हो जाएंगे।

.col-md-8
.col-md-6
.col-md-6
.col-md-4

मिश्रित: मोबाइल और डेस्कटॉप

बूटस्ट्रैप 3 ग्रिड सिस्टम में कक्षाओं के चार स्तर हैं: xs (फ़ोन), sm (टैबलेट), md (डेस्कटॉप), और lg (बड़ा डेस्कटॉप)। अधिक गतिशील और लचीले लेआउट बनाने के लिए आप इन वर्गों के लगभग किसी भी संयोजन का उपयोग कर सकते हैं।

कक्षाओं का प्रत्येक स्तर बढ़ता है, जिसका अर्थ है कि यदि आप xs और sm के लिए समान चौड़ाई निर्धारित करने की योजना बना रहे हैं, तो आपको केवल xs निर्दिष्ट करने की आवश्यकता है।

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

मिश्रित: मोबाइल, टैबलेट और डेस्कटॉप

.col-xs-12 .col-sm-6 .col-lg-8
.col-sm-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

स्तंभ समाशोधन

असमान सामग्री के साथ अजीब रैपिंग को रोकने के लिए विशिष्ट ब्रेकपॉइंट्स पर फ्लोट साफ़ करें।

.col-xs-6 .col-sm-3
अपने व्यूपोर्ट का आकार बदलें या उदाहरण के लिए इसे अपने फोन पर देखें।
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

ऑफसेट, पुश, और पुल रीसेट

विशिष्ट ब्रेकप्वाइंट पर ऑफसेट, पुश और पुल को रीसेट करें।

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0