Bootstrap 5 গ্রিড: ছোট ডিভাইস

ছোট ডিভাইস গ্রিড ইনস্ট্যান্স

XSmall ছোট মাঝারি বড় অত্যন্ত বড় XXL
শ্রেণীপ্রতীক .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
স্ক্রিন চাপ <576px >=576px >=768px >=992px >=1200px >=1400px

আমরা দুটি স্তম্ভের একটি সাধারণ সাজানোর জন্য এই এককবিন্যাসটি ব্যবহার করব: ছোট ডিভাইসের জন্য, আমরা 25% / 75% ভাগ করা হতে চাই。

ছোট ডিভাইস হল সম্প্রসারিত পর্দার চাপ576 পিক্সেল থেকে 767 পিক্সেল.

ছোট ডিভাইসের জন্য, আমরা .col-sm-* শ্রেণী.

আমরা দুটি স্তম্ভে নিচের শ্রেণী যোগ করব:

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

এই উদাহরণ ছোট (এবং মাঝারি, বড়, অত্যন্ত বড় এবং অত্যন্ত বড়) ডিভাইসে 25% / 75% ভাগ করা হবে। অত্যন্ত ছোট ডিভাইসে এটি স্বয়ংক্রিয়ভাবে স্তম্ভ হয় (100%):

এককবিন্যাস

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 bg-primary">
      <p>বিশ্ব প্রাকৃতিক সংরক্ষণ ফাউন্ডেশন (WWF), ১৯৬১ সালের ২৯ এপ্রিল স্থাপিত, তার প্রতীক একটি হাতি হয় ...</p>
    </div>
    <div class="col-sm-9 bg-dark">
      <p>১৯৮০ সালে, WWF সরকারীভাবে চীনে এসেছিল, চীন সরকারের আমন্ত্রণে বিশাল পাহাড়ী হাতি এবং তার আবাসস্থলের সুরক্ষা কাজ করতে এসেছিল ...</p>
    </div>
  </div>
</div>

আপনার নিজেই চেষ্টা করুন

দৃষ্টান্ত:সমগ্রমূল সমান বা কম হতে হবে 12 (সব 12টি সম্ভব স্তম্ভ ব্যবহার করা না হবে):

33.3% / 66.6% ভাগ করার জন্য, আপনাকে .col-sm-4 এবং .col-sm-850% / 50% ভাগ করার জন্য, আপনাকে .col-sm-6 এবং .col-sm-6) :

এককবিন্যাস

33.3/66.6% split: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-primary">
      <p>বিশ্ব প্রাকৃতিক সংরক্ষণ ফাউন্ডেশন (WWF), ১৯৬১ সালের ২৯ এপ্রিল স্থাপিত, তার প্রতীক একটি হাতি হয় ...</p>
    </div>
    <div class="col-sm-8 bg-dark">
      <p>১৯৮০ সালে, WWF সরকারীভাবে চীনে এসেছিল, চীন সরকারের আমন্ত্রণে বিশাল পাহাড়ী হাতি এবং তার আবাসস্থলের সুরক্ষা কাজ করতে এসেছিল ...</p>
    </div>
  </div>
</div>
<!-- 50%/50% ভাগ: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>বিশ্ব প্রাকৃতিক সংরক্ষণ ফাউন্ডেশন (WWF), ১৯৬১ সালের ২৯ এপ্রিল স্থাপিত, তার প্রতীক একটি হাতি হয় ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>১৯৮০ সালে, WWF সরকারীভাবে চীনে এসেছিল, চীন সরকারের আমন্ত্রণে বিশাল পাহাড়ী হাতি এবং তার আবাসস্থলের সুরক্ষা কাজ করতে এসেছিল ...</p>
    </div>
  </div>
</div>

আপনার নিজেই চেষ্টা করুন

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

Bootstrap 5-এ, সকল ডিভাইসের জন্য সমান প্রস্থের স্তম্ভ তৈরি করার একটি সহজ পদ্ধতি রয়েছে: শুধুমাত্র .col-sm-* এবং কেবল col ইলেকট্রনউপর .col-sm ক্লাসে ব্যবহার করা হয়

যদি স্ক্রিনের মাপএকত্রে 576px কমএবং স্তম্ভগুলি অনুভূমিকভাবে স্থাপন করা হবে:

<!-- দুটি স্তম্ভ: সমস্ত স্ক্রিনের 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>

আপনার নিজেই চেষ্টা করুন

পরবর্তী চপ্তরে মধ্যম ডিভাইসের জন্য ভিন্ন ভাগ প্রতিশত যোগ করার কিভাব দেখানো হবে。