سیستم گرید بوت‌استرپ بر پایه Flexbox ساخته شده و صفحه رو به 12 ستون مساوی تقسیم می‌کنه.
با ترکیب این ستون‌ها می‌تونی هر نوع چیدمانی بسازی.

📌 ساختار اصلی گرید

یک گرید از سه بخش تشکیل میشه:

1. Container → ظرف کلی (مثل همونی که توضیح دادیم: .container یا .container-fluid)

2. Row → ردیف (با کلاس .row)

3. Column → ستون‌ها (با کلاس .col-...)

✅ مثال ساده

<div class="container">
  <div class="row">
    <div class="col bg-primary text-white">ستون 1</div>
    <div class="col bg-success text-white">ستون 2</div>
    <div class="col bg-danger text-white">ستون 3</div>
  </div>
</div>

🔹 اینجا سه ستون مساوی در یک ردیف ساختیم.
چون بوت‌استرپ 12 ستون داره، وقتی 3 تا col استفاده کنیم → هرکدوم 4 ستون می‌گیرن (12/3).

📌 کنترل اندازه ستون‌ها

می‌تونیم به ستون‌ها اندازه مشخص بدیم با استفاده از کلاس‌های زیر:

• col-1 تا col-12 → عدد ستون‌ها (از 1 تا 12).

• مثلا col-6 یعنی نصف صفحه (چون 6/12 = 50%).

مثال:

<div class="container">
  <div class="row">
    <div class="col-4 bg-warning">ستون 4</div>
    <div class="col-8 bg-info">ستون 8</div>
  </div>
</div>

📌 واکنش‌گرایی در گرید

بوت‌استرپ برای هر breakpoint کلاس جدا داره:

• col-sm-* → از 576px به بالا

• col-md-* → از 768px به بالا

• col-lg-* → از 992px به بالا

• col-xl-* → از 1200px به بالا

• col-xxl-* → از 1400px به بالا

مثال واکنش‌گرا

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8 bg-primary text-white">محتوا</div>
    <div class="col-12 col-md-4 bg-success text-white">سایدبار</div>
  </div>
</div>

🔹 اینجا:

• روی موبایل: هر ستون کل عرض صفحه رو می‌گیره (col-12)

• از تبلت به بالا: یکی 8 ستون می‌گیره، یکی 4 ستون.

✨ خلاصه

• گرید بوت‌استرپ 12 ستونه است.

• row برای ساخت ردیف.

• col برای ستون‌ها (مساوی یا با اندازه دلخواه).

• واکنش‌گرا با col-sm-*, col-md-*, col-lg-* و غیره.