बूटस्ट्रॅप ग्रिड उदाहरणां

बूटस्ट्रॅप ग्रिड प्रणाली भितर बांदपाची तुमकां वळख करून दिवपाक मुळाव्यो ग्रिड मांडावळी.

ह्या उदाहरणांनी .themed-grid-colकांय थीमिंग जोडपाक स्तंभांक वर्ग जोडला. हो वर्ग न्हय जो पूर्वनिर्धारीतपणान बूटस्ट्रॅपांत उपलब्ध आसा.

पांच जाळी थर

Bootstrap ग्रिड प्रणालीक पांच टियर आसात, आमी समर्थीत केल्ल्या दरेका डिव्हायस श्रेणी खातीर एक. दरेक टियर उण्यांत उण्या दृश्यपोर्ट आकाराचेर सुरू जाता आनी आपोआप व्हड साधनांक लागू जाता जो मेरेन अधिलिखित केल्या बगर.

.कोल-४ हें नांव

.कोल-स्म-4 हें नांव

.कोल-मड-4 हें नांव

.कोल-एलजी-4 हें नांव

.कोल-एक्सएल-4 हें नांव

.कोल-xxl-4 हें नांव

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

डेस्कटॉपाचेर सुरू जावपी आनी व्हड डेस्कटॉपाचेर स्केल करपी तीन समान रुंदायेचे स्तंभ मेळोवचे . मोबायल डिव्हायस, टॅबलेट आनी सकयल, स्तंभ आपोआप स्टॅक जातले.

.कोल-मड-4 हें नांव

तीन समान स्तंभ पर्यायी

वर्ग वापरून .row-cols-*, तुमी सहजपणान समान स्तंभ आशिल्ली जाळी तयार करूंक शकतात.

.colभुरगें चें .row-cols-md-3

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

डेस्कटॉपाचेर सुरू जावन वेगवेगळ्या रुंदायेच्या व्हडल्या डेस्कटॉपाचेर स्केल करपी तीन स्तंभ मेळोवचे . उगडास दवरात, एकाच आडव्या ब्लॉका खातीर जाळी स्तंभ बारा मेरेन जोडपाक जाय. ताचे परस चड, आनी स्तंभ व्यूपोर्ट कितेंय आसूं स्टॅक करपाक लागतात.

.कोल-मड-3 हें नांव

.कोल-मड-6 हें नांव

.कोल-मड-3 हें नांव

दोन स्तंभ

डेस्कटॉपाचेर सुरू जावन व्हडल्या डेस्कटॉपाचेर स्केल करपी दोन स्तंभ मेळोवचे .

.कोल-मड-८ हें नांव

.कोल-मड-4 हें नांव

पुराय रुंदायेचो, एकूच स्तंभ

पुराय रुंदायेच्या घटकांखातीर खंयच्याच ग्रिड वर्गांची गरज ना.

दोन नेस्टेड स्तंभ आशिल्ले दोन स्तंभ

दस्तावेजीकरणा प्रमाणें, नेस्टिंग सोंपें आसा-फकत अस्तित्वांत आशिल्ल्या स्तंभा भितर स्तंभांची ओळ दवरात. हाका लागून तुमकां डेस्कटॉपाचेर सुरू जावपी आनी व्हडल्या डेस्कटॉपाचेर स्केल करपी दोन स्तंभ मेळटात , व्हडल्या स्तंभा भितर आनीक दोन (समान रुंदाय) आसतात.

मोबायल डिव्हायस आकार, टॅबलेट आनी सकयल, हे स्तंभ आनी तांचे नेस्टेड स्तंभ स्टॅक जातले.

.कोल-मड-८ हें नांव

.कोल-मड-6 हें नांव

.कोल-मड-4 हें नांव

मिश्र: मोबायल आनी डेस्कटॉप

बूटस्ट्रॅप v4 ग्रिड प्रणालींत पांच थर वर्ग आसात: xs (अतिरिक्त ल्हान, हो वर्ग इन्फिक्स वापरनात), sm (ल्हान), md (मध्यम), lg (व्हड), आनी xl (अतिरिक्त व्हड). तुमी चड गतिशील आनी लवचीक मांडावळ तयार करपाक ह्या वर्गांचें लागीं लागीं खंयचेंय संयोजन वापरूं येता.

वर्गांचो दरेक टियर स्केल अप जाता, म्हळ्यार जर तुमी md, lg आनी xl खातीर समान रुंदायो सेट करपाची येवजण करता जाल्यार, तुमकां फकत md निर्देशीत करपाची गरज आसा.

.कोल-मड-८ हें नांव

.कोल-6 .कोल-एमडी-4

.कोल-6 हें नांव

मिश्र: मोबायल, टॅबलेट, आनी डेस्कटॉप

.कोल-एसएम-6 .कोल-एलजी-8

.कोल-6 .कोल-एलजी-4

.कोल-६ .कोल-एसएम-४

गटर करतात

वर्गांवांगडा .gx-*आडवे गटर समायोजीत करूं येतात.

.col.gx-4गटर आशिल्लें

.gy-*उब्या गटरांचेर नियंत्रण दवरपाखातीर वर्गांचो उपेग करचो .

.col.gy-4गटर आशिल्लें

वर्गांवांगडा .g-*दोनूय दिकांनी आशिल्ले गटर समायोजीत करूं येतात.

.col.g-3गटर आशिल्लें

पात्रां

Bootstrap v4.4 त जोडिल्ले अतिरिक्त वर्ग एका विशिश्ट ब्रेकपॉइंट मेरेन 100% रुंद आशिल्ल्या कंटेनरांक परवानगी दितात. v5 नवो xxlब्रेकपॉइंट जोडटा.

.पात्रांतलें

.पात्र-सं

.कंटेनर-मड हें नांव

.कंटेनर-एलजी

.कंटेनर-xl हें नांव

.कंटेनर-xxl हें नांव

.पात्र-द्रव