बूटस्ट्रैप ग्रिड - स्टैक्ड-टू-क्षैतिज
बूटस्ट्रैप ग्रिड उदाहरण: स्टैक्ड-टू-हॉरिजॉन्टल
हम एक बुनियादी ग्रिड सिस्टम बनाएंगे जो बड़े उपकरणों पर क्षैतिज होने से पहले अतिरिक्त छोटे उपकरणों पर स्टैक्ड होना शुरू हो जाएगा।
निम्नलिखित उदाहरण एक साधारण "स्टैक्ड-टू-हॉरिजॉन्टल" दो-स्तंभ लेआउट दिखाता है, जिसका अर्थ है कि अतिरिक्त छोटी स्क्रीन को छोड़कर, सभी स्क्रीन पर 50%/50% विभाजन होगा, जिसे यह स्वचालित रूप से स्टैक करेगा (100%):
col-sm-6
col-sm-6
उदाहरण: स्टैक्ड-टू-हॉरिज़ॉन्टल
<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
युक्ति: कक्षाओं में संख्याएँ .col-sm-*इंगित करती हैं कि div को कितने कॉलमों को फैलाना चाहिए (12 में से)। इसलिए, .col-sm-11 कॉलम तक, .col-sm-44 कॉलम तक,
.col-sm-66 कॉलम तक, आदि।
नोट: सुनिश्चित करें कि योग हमेशा 12 तक जुड़ता है!
युक्ति: आप वर्ग को इसमें बदलकर किसी निश्चित-चौड़ाई वाले लेआउट को पूर्ण-चौड़ाई वाले लेआउट में बदल सकते हैं :.container.container-fluid
उदाहरण: द्रव कंटेनर
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>