Bootstrap 5 গ্রিড

Bootstrap 5 গ্রিড সিস্টেম

Bootstrap গ্রিড সিস্টেম flexbox-এর মাধ্যমে নির্মিত, পৃষ্ঠায় সর্বোচ্চ 12টি কল অনুমোদিত

আপনি যদি সমস্ত 12টি কলকে এককভাবে ব্যবহার করতে চান না, তবে এই কলগুলি মিলিয়ে দিতে পারেন, যাতে আপনি আরও প্রসারিত কল তৈরি করতে পারেন:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

গ্রিড সিস্টেম দ্রুত প্রতিক্রিয়াশীল, কলগুলি সক্রিয় পরিমাণ অনুযায়ী স্বয়ংক্রিয়ভাবে পুনর্গঠিত হয়

নিশ্চিত করুন যে, সমগ্রমূল সমানভাবে বা কম হয় 12 (যদি আপনি সমস্ত 12টি সক্রিয় করতে চান না)

গ্রিড শ্রেণী

Bootstrap 5 গ্রিড সিস্টেমটির মধ্যে ছয়টি শ্রেণী রয়েছে:

  • .col- (অত্যন্ত ছোট ডিভাইস - সক্রিয় পরিমাণ 576px কম)
  • .col-sm- (ছোট ডিভাইস - সক্রিয় পরিমাণ 576px বা বেশি)
  • .col-md- (মাঝারি ডিভাইস - সক্রিয় পরিমাণ 768 পিক্সেল বা বেশি)
  • .col-lg- (বড় ডিভাইস - সক্রিয় পরিমাণ 992 পিক্সেল বা বেশি)
  • .col-xl- (xlarge ডিভাইস - সক্রিয় পরিমাণ 1200px বা বেশি)
  • .col-xxl- (xxlarge ডিভাইস - সক্রিয় পরিমাণ 1400px বা বেশি)

আপনি উপরোক্ত শ্রেণীগুলি মিলিয়ে দিতে পারেন, তাহলে আপনি আরও গতিময় এবং মজবুত লেআউট তৈরি করতে পারেন。

টিপ:প্রত্যেক শ্রেণীটি আপেক্ষিকভাবে সমানভাবে সম্প্রসারিত হয়, তাই আপনি যদি চান sm এবং md একই প্রস্থা নির্ধারণ করতে আপনাকে কেবল বৈধ করতে হবে sm。

Bootstrap 5 গ্রিডের মূল বিন্যাস

এখানে Bootstrap 5 গ্রিডের মূল বিন্যাসটি থাকে:

কলামের প্রস্থ নিয়ন্ত্রণ করুন, এবং এগুলির বিভিন্ন ডিভাইসে কিভাবে দেখা যাবে
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
বা Bootstrap-এর স্বয়ংক্রিয় সাজানো করার জন্য
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

প্রথম উদাহরণ: একটি পাতা তৈরি করুন (<div class="row">)। তবে, উপযুক্ত ট্যাগ (সঠিক সংখ্যাসহ) যোগ করে, সংখ্যক সারি যোগ করুন .col-*-* শ্রেণীর ট্যাগ)। প্রথমটি (* *) প্রতিক্রিয়াশীলতা নির্দেশ করে: sm, md, lg, xl অথবা xxl, এবং দ্বিতীয়টি সংখ্যা নির্দেশ করে, যেটির সমগ্র সংখ্যা 12 হবে

দ্বিতীয় উদাহরণ: প্রত্যেক সারিকে col একটি সংখ্যা যোগ করুন, না তবে ব্রাউজারটি স্বয়ংক্রিয়ভাবে সাজায়, যার ফলে সমান প্রস্থবিশিষ্ট সারি তৈরি হবে: দুই "col" উপাদান = প্রত্যেক col 50% প্রস্থবিশিষ্ট, এবং তিনটি cols = প্রত্যেক col 33.33% প্রস্থবিশিষ্ট। চারটি সারি = 25% প্রস্থবিশিষ্ট, ইত্যাদি। আপনি আরও ব্যবহার করতে পারেন .col-sm|md|lg|xl|xxl সারিগুলিকে প্রতিক্রিয়াসম্পন্ন করুন

আমরা বেশ কয়েকটি মৌলিক Bootstrap 5 গ্রিড লেআউটের উদাহরণ সংগ্রহ করেছি

তিনটি সমান সারি

নিম্নলিখিত উদাহরণটি দেখিয়েছে কিভাবে সব সাইজের ডিভাইস এবং স্ক্রিন প্রস্থে তিনটি সমান প্রস্থবিশিষ্ট সারি তৈরি করা হয়

উদাহরণ

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

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

প্রতিক্রিয়াসম্পন্ন সারি

নিম্নলিখিত উদাহরণটি দেখিয়েছে কিভাবে ট্যাবলেট থেকে চারটি সমান প্রস্থবিশিষ্ট সারি তৈরি করা হয়, এবং অতিরিক্ত বড় ডেস্কটপে প্রসারিত হয়প্রস্থ কম করে 576px এর মধ্যে মোবাইল অথবা স্ক্রিনে, সারিগুলি স্বয়ংক্রিয়ভাবে একসঙ্গে থাকবে

উদাহরণ

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

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

দুইটি ভিন্ন প্রতিক্রিয়াসম্পন্ন সারি

নিম্নলিখিত উদাহরণটি দেখিয়েছে কিভাবে ট্যাবলেটে দুইটি ভিন্ন প্রস্থবিশিষ্ট সারিতে আসা এবং অতিরিক্ত বড় ডেস্কটপে প্রসারিত হয়

উদাহরণ

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

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

টিপ:আপনি এই টিউটোরিয়ালের পরে এসব শিখবেন গ্রিড সিস্টেম আরও বিষয়