मुख्य सामग्री पर जाईं डॉक्स नेविगेशन पर जाईं
in English

ढेर हो गइल बा

आशुलिपि हेल्पर जवन हमनी के फ्लेक्सबॉक्स उपयोगिता के ऊपर से बनावेला ताकि घटक लेआउट पहिले से तेज आ आसान बनावल जा सके।

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

हेड अप हो गइल बा! फ्लेक्सबॉक्स वाला गैप यूटिलिटीज खातिर सपोर्ट हाल ही में सफारी में जोड़ल गइल रहे, एहसे अपना इरादा वाला ब्राउजर समर्थन के सत्यापन करे पर विचार करीं. ग्रिड लेआउट में कवनो मुद्दा ना होखे के चाहीं. अउरी पढ़ीं .

खड़ा

.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;
}