۱. کلاس پایه col

• اگر فقط از col استفاده شود → ستون‌ها به شکل خودکار و مساوی تقسیم می‌شوند.
• مثال: سه ستون با col → هرکدام ۴ واحد (از ۱۲ واحد).

۲. کلاس‌های ریسپانسیو (col-{breakpoint})

• برای تعیین رفتار ستون‌ها در اندازه‌های مختلف صفحه استفاده می‌شوند.
• Breakpointها در بوتسترپ 4:
  • sm → ≥576px
  • md → ≥768px
  • lg → ≥992px
  • xl → ≥1200px

۳. col-sm

• برای صفحه‌های کوچک (≥576px).
• اگر عدد نداشته باشد (col-sm) → ستون‌ها مساوی تقسیم می‌شوند در سایز کوچک و بالاتر.
• اگر عدد داشته باشد (col-sm-6) → ستون نصف عرض ردیف می‌گیرد (۶ واحد).

۴. col-md

• برای صفحه‌های متوسط (≥768px).
• مثال: col-md-4 → ستون ۴ واحد می‌گیرد، یعنی یک‌سوم ردیف.

۵. col-lg

• برای صفحه‌های بزرگ (≥992px).
• مثال: col-lg-3 → ستون ۳ واحد می‌گیرد (یک‌چهارم ردیف).

۶. col-xl

• برای صفحه‌های خیلی بزرگ (≥1200px).
• مثال: col-xl-2 → ستون ۲ واحد می‌گیرد (یک‌ششم ردیف).

۷. ترکیب کلاس‌ها

• می‌توان چند کلاس برای ریسپانسیو بودن ستون‌ها ترکیب کرد.

• مثال:

   

  <div class="col-12 col-sm-6 col-md-4 col-lg-3">...</div>

  • در موبایل (خیلی کوچک) → کل ردیف (۱۲ واحد).
  • در sm → نصف ردیف.
  • در md → یک‌سوم ردیف.
  • در lg → یک‌چهارم ردیف.