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

डेस्कटॉपपासून सुरू होणारे तीन समान-रुंदीचे स्तंभ मिळवा आणि मोठ्या डेस्कटॉपवर स्केलिंग करा . मोबाईल डिव्‍हाइसेस, टॅब्लेट आणि खाली, स्‍तंभ आपोआप स्‍कॅक होतील.

.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