ষ্টেকসমূহ

আমাৰ flexbox সঁজুলিসমূহৰ ওপৰত নিৰ্মাণ কৰা চৰ্টহেণ্ড সহায়কসমূহ যাতে উপাদান বিন্যাস আগৰ তুলনাত দ্ৰুত আৰু সহজ হয়।

এই পৃষ্ঠাত

ষ্টেকসমূহে বুটষ্ট্ৰেপত বিন্যাসসমূহ দ্ৰুত আৰু সহজে সৃষ্টি কৰিবলে বহুতো ফ্লেক্সবক্স বৈশিষ্ট্যসমূহ প্ৰয়োগ কৰাৰ বাবে এটা চৰ্টকাট প্ৰদান কৰে। ধাৰণা আৰু প্ৰণয়নৰ বাবে সকলো ক্ৰেডিট মুক্ত উৎস পাইলন প্ৰকল্পলৈ যায় ।

মুৰ ডাঙি! flexbox ৰ সৈতে gap সঁজুলিসমূহৰ বাবে সমৰ্থন শেহতীয়াকৈ Safari ত যোগ কৰা হৈছে, গতিকে আপোনাৰ উদ্দেশ্যপ্ৰণোদিত ব্ৰাউজাৰ সমৰ্থন পৰীক্ষা কৰাৰ কথা বিবেচনা কৰক। গ্ৰীড লেআউটত কোনো সমস্যা থাকিব নালাগে। অধিক পঢ়ক ৷

উলম্ব

.vstackউলম্ব বিন্যাস সৃষ্টি কৰিবলৈ ব্যৱহাৰ কৰক । ষ্টেক কৰা বস্তুসমূহ অবিকল্পিতভাৱে সম্পূৰ্ণ-প্ৰস্থ। .gap-*বস্তুসমূহৰ মাজত স্থান যোগ কৰিবলে সঁজুলিসমূহ ব্যৱহাৰ কৰক।

প্ৰথম বস্তু

দ্বিতীয় বস্তু

তৃতীয় বস্তু

html

<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-*বস্তুসমূহৰ মাজত স্থান যোগ কৰিবলে সঁজুলিসমূহ ব্যৱহাৰ কৰক।

প্ৰথম বস্তু

দ্বিতীয় বস্তু

তৃতীয় বস্তু

html

<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কৰা যেনে স্পেচাৰ হিচাপে:

প্ৰথম বস্তু

দ্বিতীয় বস্তু

তৃতীয় বস্তু

html

<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>

আৰু উলম্ব নিয়মৰ সৈতে :

প্ৰথম বস্তু

দ্বিতীয় বস্তু

তৃতীয় বস্তু

html

<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বুটাম আৰু অন্য উপাদানসমূহ ষ্টেক কৰিবলে ব্যৱহাৰ কৰক :

html

<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:

html

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