ढेर करदे

आशुलिपि हेल्पर जेह् ड़े साढ़े फ्लेक्सबॉक्स उपयोगिताएं दे उप्पर बनांदे न तां जे घटक लेआउट गी पैह् ले थमां बी तेज़ ते आसान बनाया जाई सकै।

इस पेज पर

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

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

लंबूतरा

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