গটারস

গুটারগুলি হল আপনার কলামগুলির মধ্যে প্যাডিং, যা বুটস্ট্র্যাপ গ্রিড সিস্টেমে প্রতিক্রিয়াশীলভাবে স্থান এবং সামগ্রী সারিবদ্ধ করতে ব্যবহৃত হয়।

এই পৃষ্ঠায়

তারা কিভাবে কাজ করে

অনুভূমিক দ্বারা তৈরি কলামের বিষয়বস্তুর মধ্যে ফাঁকগুলি হল গটার padding। আমরা প্রতিটি কলামে padding-rightএবং সেট করি এবং বিষয়বস্তু সারিবদ্ধ করতে প্রতিটি সারির শুরুতে এবং শেষে অফসেট করতে নেতিবাচক ব্যবহার করি।padding-leftmargin
গটারগুলি 1.5rem( 24px) চওড়া থেকে শুরু হয়। এটি আমাদের গ্রিডকে প্যাডিং এবং মার্জিন স্পেসার স্কেলের সাথে মেলাতে দেয়।
Gutters প্রতিক্রিয়াশীলভাবে সমন্বয় করা যেতে পারে. অনুভূমিক নর্দমা, উল্লম্ব নর্দমা, এবং সমস্ত নর্দমা সংশোধন করতে ব্রেকপয়েন্ট-নির্দিষ্ট নর্দমার ক্লাস ব্যবহার করুন।

অনুভূমিক নর্দমা

.gx-*অনুভূমিক নর্দমার প্রস্থ নিয়ন্ত্রণ করতে ক্লাস ব্যবহার করা যেতে পারে। একটি ম্যাচিং প্যাডিং ইউটিলিটি ব্যবহার করে অবাঞ্ছিত ওভারফ্লো এড়াতে বড় নর্দমা ব্যবহার করা হলে বা অভিভাবককে সামঞ্জস্য করতে হতে পারে .container। .container-fluidউদাহরণস্বরূপ, নিম্নলিখিত উদাহরণে আমরা এর সাথে প্যাডিং বাড়িয়েছি .px-4:

কাস্টম কলাম প্যাডিং

html

<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

.rowএকটি বিকল্প সমাধান হল .overflow-hiddenক্লাসের চারপাশে একটি মোড়ক যুক্ত করা :

কাস্টম কলাম প্যাডিং

html

<div class="container overflow-hidden text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

উল্লম্ব নর্দমা

.gy-*কলামগুলি যখন নতুন লাইনে মোড়ানো হয় তখন একটি সারির মধ্যে উল্লম্ব নর্দমার প্রস্থ নিয়ন্ত্রণ করতে ক্লাসগুলি ব্যবহার করা যেতে পারে। .rowঅনুভূমিক নর্দমাগুলির মতো, উল্লম্ব নর্দমাগুলি একটি পৃষ্ঠার শেষে নীচে কিছু উপচে পড়তে পারে। যদি এটি ঘটে তবে আপনি ক্লাসের .rowসাথে একটি মোড়ক যুক্ত করুন:.overflow-hidden

কাস্টম কলাম প্যাডিং

html

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

অনুভূমিক এবং উল্লম্ব নর্দমা

.g-*.overflow-hiddenঅনুভূমিক নর্দমার প্রস্থ নিয়ন্ত্রণ করতে ক্লাসগুলি ব্যবহার করা যেতে পারে, নিম্নলিখিত উদাহরণের জন্য আমরা একটি ছোট নর্দমার প্রস্থ ব্যবহার করি, তাই র্যাপার ক্লাস যুক্ত করার প্রয়োজন হবে না ।

কাস্টম কলাম প্যাডিং

html

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

সারি সারি কলাম নর্দমা

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

সারি কলাম

html

<div class="container text-center">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
  </div>
</div>

নালা নেই

আমাদের পূর্বনির্ধারিত গ্রিড ক্লাসের কলামগুলির মধ্যে থাকা গটারগুলি দিয়ে সরানো যেতে পারে .g-0৷ এটি সমস্ত তাত্ক্ষণিক শিশু কলাম থেকে নেতিবাচক marginগুলি .rowএবং অনুভূমিকগুলি সরিয়ে দেয়।padding

একটি প্রান্ত থেকে প্রান্ত নকশা প্রয়োজন? অভিভাবককে বাদ দিন .containerবা ওভারফ্লো প্রতিরোধ করতে যোগ .container-fluidকরুন ।.mx-0.row

অনুশীলনে, এটি দেখতে কেমন তা এখানে। মনে রাখবেন আপনি এটিকে অন্যান্য পূর্বনির্ধারিত গ্রিড ক্লাসের সাথে ব্যবহার করা চালিয়ে যেতে পারেন (কলামের প্রস্থ, প্রতিক্রিয়াশীল স্তর, পুনঃক্রম এবং আরও অনেক কিছু সহ)।

.col-sm-6 .col-md-8

.col-6 .col-md-4

html

<div class="row g-0 text-center">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

নর্দমা পরিবর্তন করুন

ক্লাসগুলি সাস ম্যাপ থেকে তৈরি করা হয় $guttersযা সাস ম্যাপ থেকে উত্তরাধিকারসূত্রে প্রাপ্ত $spacers।

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);