🔹 توی بوت‌استرپ، container نقش ظرف (Wrapper) رو برای المان‌ها بازی می‌کنه.
این ظرف باعث میشه محتوای صفحه منظم و وسط‌چین باشه و با سیستم گرید هم کار می‌کنه.

🔹 انواع Container در بوت‌استرپ

1. .container

• یه کانتینر ثابت (Fixed Width) هست.

• در سایزهای مختلف صفحه (Mobile, Tablet, Desktop) عرضش تغییر می‌کنه اما همیشه وسط صفحه قرار می‌گیره.

<div class="container bg-light p-3">
  <h1>این یک container معمولی است</h1>
  <p>عرضش بر اساس اندازه صفحه تغییر می‌کنه.</p>
</div>

2. .container-fluid

• همیشه تمام عرض صفحه (100%) رو می‌گیره.

• چه روی موبایل باشی چه مانیتور بزرگ، همیشه کشیده میشه.

<div class="container-fluid bg-info p-3">
  <h1>این یک container-fluid است</h1>
  <p>همیشه 100% عرض صفحه را پر می‌کند.</p>
</div>

3. .container-{breakpoint}

• از یه سایز خاص به بعد، ثابت میشه و قبل از اون به صورت فلویید (100%) عمل می‌کنه.

• اینجوری می‌تونی کنترل بهتری روی واکنش‌گرایی داشته باشی.

مثال:

<div class="container-md bg-warning p-3">
  <h1>container-md</h1>
  <p>روی موبایل فلویید هست، از تبلت به بعد ثابت میشه.</p>
</div>

✨ خلاصه

• container → واکنش‌گرا، ولی وسط‌چین و محدود.

• container-fluid → همیشه تمام عرض صفحه.

• container-{breakpoint} → ترکیبی (فلویید + ثابت از یه سایز خاص).