۱. سیستم Grid در بوتسترپ 4

• بوتسترپ از سیستم ۱۲ ستونه (12-column) برای طراحی ریسپانسیو استفاده می‌کند.
• ساختار اصلی: Container → Row → Column

۲. کلاس container

• محتوای سایت داخل container قرار می‌گیرد.
• دو نوع container:
  1. container → عرض ثابت در هر breakpoint
  2. container-fluid → عرض 100% همیشه
• کار container: تعیین عرض و فاصله (padding) از لبه‌های صفحه.

۳. مدیا کوئری‌ها (Media Queries)

• بوتسترپ 4 از breakpoints ریسپانسیو استفاده می‌کند:
  • xs <576px (پیش‌فرض)
  • sm ≥576px
  • md ≥768px
  • lg ≥992px
  • xl ≥1200px
• این breakpoints برای تعیین نمایش ستون‌ها در اندازه‌های مختلف صفحه کاربرد دارد.

۴. کلاس row

• row برای گروه‌بندی ستون‌ها (columns) استفاده می‌شود.
• ویژگی‌ها:
  • فضای منفی (negative margin) برای جبران padding ستون‌ها.
  • همه ستون‌های داخل row باید جمعاً حداکثر 12 واحد باشند.

۵. کلاس col

• ستون‌ها داخل row تعریف می‌شوند.
• انواع:
  • col → تقسیم مساوی فضای موجود بین ستون‌ها
  • col-{breakpoint}-{number} → تعیین تعداد واحد (1 تا 12) در هر breakpoint
• مثال: col-md-6 → ستون نصف عرض در صفحه متوسط و بزرگ

۶. کلاس w-100

• برای ایجاد ستون جدید یا شکستن ردیف استفاده می‌شود.
• باعث می‌شود عنصر تمام عرض ردیف را اشغال کند.

۷. مروری بر Utility ها

• بوتسترپ کلاس‌های آماده برای margin، padding، text، display و flex دارد.
• مثال‌ها:
  • m-3 → margin 3 واحد
  • p-2 → padding 2 واحد
  • text-center → متن وسط‌چین
  • d-flex → استفاده از flexbox