1️⃣ Basic 3 Column Layout

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

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

• XS → ستون‌ها ستونی

• SM به بالا → افقی

2️⃣ Stacked to Horizontal (موبایل به دسکتاپ)

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

• موبایل → ستونی

• دسکتاپ → افقی

3️⃣ Mixed Column Sizes

<div class="row">
  <div class="col-md-8">ستون بزرگ</div>
  <div class="col-md-4">ستون کوچک</div>
</div>

• ستون اول دو سوم عرض

• ستون دوم یک سوم عرض

4️⃣ Auto Layout Columns

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

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

5️⃣ Column Ordering

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

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

• می‌توان از order-sm, order-md, … برای واکنش‌گرایی استفاده کرد

6️⃣ Column Offsets

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

• فاصله از سمت چپ ایجاد می‌کند

• مناسب برای قرار دادن محتوا در مرکز

7️⃣ Nested Columns (ستون‌های تو در تو)

<div class="row">
  <div class="col-md-8">
    ستون اصلی
    <div class="row">
      <div class="col-6">ستون داخلی ۱</div>
      <div class="col-6">ستون داخلی ۲</div>
    </div>
  </div>
  <div class="col-md-4">ستون کناری</div>
</div>

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

• امکان طراحی پیچیده و چند سطحی

8️⃣ Responsive Example with Breakpoints

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

• موبایل → ستونی

• SM → دو ستون در هر ردیف

• MD → سه ستون

• LG → چهار ستون

✅ نکات مهم

• Bootstrap Grid مبتنی بر ۱۲ واحد است

• ترکیب breakpoints و col-{number} برای طراحی ریسپانسیو ضروری است

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

• همیشه ستون‌ها باید داخل row و row داخل container باشد