Bootstrap 5 গ্রিড: XXL

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

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

XXL ডিভাইসটি হল ১৪০০ পিক্সেল এবং উপরএর স্ক্রিন প্রস্থ

এই উদাহরণটি মাঝের, বড় এবং অতি-বড় ডিভাইসে ৫০/৫০% ভাগ তৈরি করবে, XXL ডিভাইসে ২৫/৭৫% ভাগ তৈরি করবে।ছোট এবং অতি-ছোট ডিভাইসে এটি স্বয়ংক্রিয়ভাবে স্ট্যাক (১০০%) হবে:

উদাহরণ

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xxl-3">
      <p>বিশ্ব প্রাকৃতিক অর্থব্যবস্থা ফাউন্ডেশন (WWF), 1961 সালের 29 এপ্রিল প্রতিষ্ঠিত, তার প্রতীক একটি হাতি আছে ...</p>
    </div>
    <div class="col-md-6 col-xxl-9">
      <p>1980 সালে, WWF সর্বপ্রথম চীনে এসেছিল, চীন সরকারের আমন্ত্রণে চীনের দক্ষিণ চীন পাহাড়ি জঙ্গলের সুবিধা এবং প্রতিষ্ঠানটির সুরক্ষা কাজ করছে ...</p>
    </div>
  </div>
</div>

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

প্রত্যহরণ:নিশ্চিত করুন যে সমগ্রটি সবসময় 12 হবে

শুধুমাত্র XXL

এই উদাহরণে, আমরা কেবল .col-xxl-6 শ্রেণী (কোনও .col-md-* এবং / অথবা .col-sm-*）。এই মানে, xxlarge যন্ত্রগুলি 50%/50% ভাগ করে নেবে। কিন্তু, ultra-wide, wide, medium, small এবং ultra-small যন্ত্রগুলিতে, তা উভয়কান্তে ভাগ করে নেবে (100% প্রস্থ):

উদাহরণ

<div class="container-fluid">
  <div class="row">
    <div class="col-xxl-6">
      <p>বিশ্ব প্রাকৃতিক অর্থব্যবস্থা ফাউন্ডেশন (WWF), 1961 সালের 29 এপ্রিল প্রতিষ্ঠিত, তার প্রতীক একটি হাতি আছে ...</p>
    </div>
    <div class="col-xxl-6">
      <p>1980 সালে, WWF সর্বপ্রথম চীনে এসেছিল, চীন সরকারের আমন্ত্রণে চীনের দক্ষিণ চীন পাহাড়ি জঙ্গলের সুবিধা এবং প্রতিষ্ঠানটির সুরক্ষা কাজ করছে ...</p>
    </div>
  </div>
</div>

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

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

Bootstrap 5-তে, সকল যন্ত্রের জন্য সমান প্রস্থ সৃষ্টির একটি সহজ পদ্ধতি রয়েছে: শুধুমাত্র .col-xxl-* সংখ্যা সরানো হবে এবং কেবল col ইলেমেন্টের উপর ব্যবহার করা হবে .col-xxl শ্রেণীটি কম করা হয়, এবং কেবল কল ইলেমেন্টের উপর ব্যবহার করা হবে

যদি স্ক্রিনের মাপ1400px এর কমএবং স্তম্ভগুলি হজমকৃত হবে:

<!-- দুই স্তম্ভ: বিশেষ বড় যন্ত্রগুলিতে 50% প্রস্থ -->
<div class="row">
  <div class="col-xxl">1 of 2</div>
  <div class="col-xxl">2 of 2</div>
</div>
<!-- চার স্তম্ভ: বিশেষ বড় যন্ত্রগুলিতে 25% প্রস্থ -->
<div class="row">
  <div class="col-xxl">1 of 4</div>
  <div class="col-xxl">2 of 4</div>
  <div class="col-xxl">3 of 4</div>
  <div class="col-xxl">4 of 4</div>
</div>

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