چطور میتونم عناصر رو به صورت افقی یا عمودی تو بوت استرپ ۵ بیارم وسط؟

سلام برای وسط چین کردن عناصر تو بوت استرپ میتونی از کلاس‌ های داخلی بوت استرپ استفاده کنی که این کار رو خیلی راحت می‌کنه.

اگر میخوای یک عنصر رو به صورت افقی وسط‌ چین کنی، میتونی از کلاس‌های flex استفاده کنی. مثلا کافیه کد زیر رو به div والد اضافه کنی:

<div class="d-flex justify-content-center">
  <div>Your content here</div>
</div>

اینجا، d-flex باعث میشه که والد به حالت فلکس‌ باکس در بیاد و justify-content-center هم بچه‌ های داخلش رو به صورت افقی وسط‌ چین میکنه.

برای وسط چین عمودی هم باز میتونی از ترکیب کلاس‌های فلکس استفاده کنی

<div class="d-flex align-items-center" style="height: 100vh;">
  <div>Your content here</div>
</div>

اینجا، align-items-center محتوا رو به صورت عمودی میاره وسط قرار برای اینکه این وسط چین کردن به شکل عمودی معلوم باشه ارتفاع والد رو به ۱۰۰ درصد ویوپورت (100vh) تنظیم کردم

اگر میخوای که عنصرت هم به صورت افقی و هم به صورت عمودی وسط بیاد، میتونی از ترکیب این دوتا استفاده کنی

<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
  <div>Your content here</div>
</div>

این کد باعث میشه که محتوات هم به صورت افقی و هم عمودی در وسط بیاد