Bootstrap 5 গ্রিড: স্তরবদ্ধ থেকে ভারসাম্যপূর্ণ

গ্রিড ইনস্ট্যান্স: ভারসাম্যপূর্ণ হবে

আমরা একটি মৌলিক গ্রিড সিস্টেম তৈরি করতে চাই, যা একটি অত্যন্ত ছোট ডিভাইসে স্তরবদ্ধ হবে, এবং আগের ডিভাইসে পারাপার হবে。

নিম্নলিখিত উদাহরণটি একটি সরল 'ভারসাম্যপূর্ণ হবে' দুই সারির সাজানো দেখায়, এর অর্থ সমস্ত স্ক্রিনের মধ্যে 50%/50% ভাগ তৈরি হবে, কিন্তু অত্যন্ত ছোট স্ক্রিনের জন্য এটি স্বয়ংক্রিয়ভাবে একক হবে (100%):

এককাঠামো: ভারসাম্যপূর্ণ হবে

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>স্তম্ভ 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>স্তম্ভ 2 ...</p>
    </div>
  </div>
</div>

আপনার নিজেই প্রয়াস করুন

সুঝানা:.col-sm-* শ্রেণীতে সংখ্যা দ্বারা div-কে কতটি স্তম্ভ অতিক্রম করবে না (মোট 12 স্তম্ভ)। তাই,.col-sm-1 1 স্তম্ভ অতিক্রম করে.col-sm-4 4 স্তম্ভ অতিক্রম করে.col-sm-6 6 স্তম্ভ অতিক্রম করে, ইত্যাদি

মন্তব্য:সমস্ত উপলব্ধ স্তম্ভ (12টি) এর সমষ্টি সুনির্দিষ্ট করুন বা কম

সুঝানা:এভাবে .container-fluid শ্রেণীটিকে .containerকোনও ফুল-প্রস্থ লেআউটকে রূপান্তরিত হবে ফিক্সেড-প্রস্থ রেসপনসিভ লেআউট

প্রতিক্রিয় কনটেন্টার

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>স্তম্ভ 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>স্তম্ভ 2 ...</p>
    </div>
  </div>
</div>

আপনার নিজেই প্রয়াস করুন

স্বয়ংক্রিয় সাজানো স্তম্ভ

Bootstrap 5-তে, সকল ডিভাইসের জন্য সমান প্রস্থের স্তম্ভ তৈরি করার একটি সহজ পদ্ধতি রয়েছে: শুধুমাত্র .col-size-* সংখ্যা মুক্ত করে কেবল কল ইলেমেন্টের উপর ব্যবহার করুন .col-size শ্রেণী।Bootstrap কতটি স্তম্ভ হবে তা চিহ্নিত করবে, এবং প্রত্যেক স্তম্ভকে একই প্রস্থ প্রদান করা হবে।size শ্রেণী (sm, md ইত্যাদি) স্তম্ভকে কখনও প্রতিক্রিয়ামূলক করবে না:

<!-- দুই স্তম্ভ: সমস্ত স্ক্রিনের 50% প্রস্থ, ব্যতীত অতি ছোট ডিভাইস (100% প্রস্থ) -->
<div class="row">
  <div class="col-sm">1 of 2</div>
  <div class="col-sm">2 of 2</div>
</div>
<!-- চার স্তম্ভ: সমস্ত স্ক্রিনের 25% প্রস্থ, ব্যতীত অতি ছোট ডিভাইস (100% প্রস্থ) -->
<div class="row">
  <div class="col-sm">1 of 4</div>
  <div class="col-sm">2 of 4</div>
  <div class="col-sm">3 of 4</div>
  <div class="col-sm">4 of 4</div>
</div>

আপনার নিজেই প্রয়াস করুন