ढेर

आशुलिपि सहायक जे हमर फ्लेक्सबॉक्स उपयोगिताक कें ऊपर निर्माण करयत छै जे घटक लेआउट कें पहिले सं बेसि तेज आ आसान बनायत छै.

इस पेज पर

स्टैक बूटस्ट्रैप मे जल्दी आ आसानी सं लेआउट बनावा कें लेल अनेक फ्लेक्सबॉक्स गुण लागू करय कें लेल एकटा शॉर्टकट प्रदान करयत छै. अवधारणा आ कार्यान्वयन के सबटा श्रेय ओपन सोर्स पाइलन प्रोजेक्ट के जाइत अछि .

हेड अप! flexbox के साथ गैप उपयोगिता के समर्थन क॑ हाल ही म॑ सफारी म॑ जोड़लऽ गेलऽ छेलै, अतः अपनऽ इच्छित ब्राउज़र समर्थन क॑ सत्यापित करै प॑ विचार कर॑ । ग्रिड लेआउट मे कोनो मुद्दा नहि हेबाक चाही। आगू पढ़ू .

खड़ा

.vstackऊर्ध्वाधर लेआउट बनेबाक लेल प्रयोग करू । ढेर कएल गेल वस्तु डिफ़ॉल्ट रूप सँ पूर्ण-चौड़ाई अछि. .gap-*आइटम कें बीच स्पेस जोड़य कें लेल उपयोगिताक कें उपयोग करूं .

प्रथम मद

दोसर मद

तेसर मद

एचटीएमएल

<div class="vstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

क्षैतिज

.hstackक्षैतिज लेआउट के लिये प्रयोग करे | ढेर करल गेल वस्तु डिफ़ॉल्ट रूप सं लंबवत केंद्रित छै आ केवल ओकर आवश्यक चौड़ाई लेतय. .gap-*आइटम कें बीच स्पेस जोड़य कें लेल उपयोगिताक कें उपयोग करूं .

प्रथम मद

दोसर मद

तेसर मद

एचटीएमएल

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

क्षैतिज मार्जिन उपयोगिताक कें उपयोग करनाय .ms-autoजेना स्पेसर कें रूप मे:

प्रथम मद

दोसर मद

तेसर मद

एचटीएमएल

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

आ ऊर्ध्वाधर नियमक संग : १.

प्रथम मद

दोसर मद

तेसर मद

एचटीएमएल

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">Third item</div>
</div>

उदाहरण के लिये

.vstackबटन आओर अन्य तत्व के ढेर करय लेल प्रयोग करू :

एचटीएमएल

<div class="vstack gap-2 col-md-5 mx-auto">
  <button type="button" class="btn btn-secondary">Save changes</button>
  <button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>

एकटा इनलाइन फॉर्म बनाउ जाहि मे .hstack:

एचटीएमएल

<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>

सस्स

.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}