1️⃣ Container (ظرف‌ها)

• ستون‌ها و ردیف‌ها باید داخل container قرار گیرند

• کلاس‌ها:

  • container → عرض ثابت و ریسپانسیو

  • container-fluid → عرض 100%

<div class="container">
  <div class="row">
    <div class="col">ستون ۱</div>
    <div class="col">ستون ۲</div>
    <div class="col">ستون ۳</div>
  </div>
</div>

2️⃣ Row (ردیف‌ها)

• کلاس: row

• ردیف‌ها ستون‌ها را در یک خط قرار می‌دهند

• ستون‌ها باید داخل ردیف باشند

<div class="row mb-3">
  <div class="col">ستون A</div>
  <div class="col">ستون B</div>
</div>

3️⃣ Columns (ستون‌ها)

• کلاس: col

• به صورت اتوماتیک برابر تقسیم می‌شوند

• می‌توان اندازه مشخص داد: col-6, col-4 و …

<div class="row">
  <div class="col-4">یک سوم</div>
  <div class="col-8">دو سوم</div>
</div>

4️⃣ Responsive Columns (ستون‌های واکنش‌گرا)

• کلاس‌ها: col-{breakpoint}-{number}

• Breakpoints: sm, md, lg, xl, xxl

<div class="row">
  <div class="col-sm-6 col-md-4">ستون ۱</div>
  <div class="col-sm-6 col-md-4">ستون ۲</div>
  <div class="col-sm-12 col-md-4">ستون ۳</div>
</div>

• ستون‌ها در موبایل ۱۲ واحد (کل عرض) و در دسکتاپ ۴ واحد (یک سوم) می‌گیرند

5️⃣ Auto Layout Columns

• اگر اندازه مشخص ندهیم، ستون‌ها به صورت برابر تقسیم می‌شوند

<div class="row">
  <div class="col">ستون ۱</div>
  <div class="col">ستون ۲</div>
  <div class="col">ستون ۳</div>
</div>

• مناسب وقتی تعداد ستون‌ها مشخص نیست

6️⃣ Column Ordering (ترتیب ستون‌ها)

• کلاس: order-{number}

• تغییر ترتیب ستون‌ها بدون تغییر HTML

<div class="row">
  <div class="col order-3">ستون ۱</div>
  <div class="col order-1">ستون ۲</div>
  <div class="col order-2">ستون ۳</div>
</div>

7️⃣ Column Offset (فاصله قبل ستون)

• کلاس: offset-{breakpoint}-{number}

<div class="row">
  <div class="col-md-4 offset-md-4">ستون وسط</div>
</div>

• ستون وسط ردیف را اشغال می‌کند و فاصله سمت چپ ایجاد می‌کند

8️⃣ Nesting Columns (تو در تو کردن ستون‌ها)

<div class="row">
  <div class="col">
    ستون اصلی
    <div class="row">
      <div class="col">ستون داخلی ۱</div>
      <div class="col">ستون داخلی ۲</div>
    </div>
  </div>
</div>

• ستون‌ها می‌توانند ردیف‌های جدید داخل خود داشته باشند

✅ نکات مهم

• سیستم Grid بوت‌استرپ 12 واحدی است

• ردیف‌ها (row) حتماً ستون‌ها (col) را در خود داشته باشند

• کلاس‌های واکنش‌گرا (col-sm, col-md, col-lg) برای طراحی موبایل فرندلی ضروری هستند

• می‌توان از offset, order, nesting برای طراحی حرفه‌ای استفاده کرد