۱. سیستم Flexbox: جابجایی هوشمند المان‌ها

بوت‌استرپ ۵ بر پایه Flexbox ساخته شده است. با استفاده از کلاس .d-flex، یک ظرف تبدیل به محیطی می‌شود که فرزندان آن می‌توانند به راحتی در جهت‌های مختلف چیده شوند.

الف) تراز افقی (Justify Content):

برای تعیین نحوه پخش شدن المان‌ها در عرض صفحه:

• .justify-content-start: چسبیدن به راست (در فارسی).
• .justify-content-center: قرار گرفتن در مرکز.
• .justify-content-between: ایجاد بیشترین فاصله ممکن بین المان‌ها (المان اول در ابتدا و المان آخر در انتها).

ب) تراز عمودی (Align Items):

اگر ارتفاع باکس‌های شما متفاوت است، با .align-items-center می‌توانید همه را در یک خط افقی مرکزی تراز کنید.

۲. ابزارهای ظاهری: سایه‌ها و گردی لبه‌ها

گاهی می‌خواهید یک المان از صفحه “بلند” شود یا لبه‌های آن نرم‌تر به نظر برسد. بدون CSS، این کار با کلاس‌های زیر ممکن است:

گرد کردن لبه‌ها (Rounded):

• .rounded: گردی معمولی.
• .rounded-pill: تبدیل المان به شکل کپسول (بسیار محبوب برای دکمه‌ها).
• .rounded-circle: تبدیل المان به دایره کامل (مناسب برای عکس پروفایل).

۳. کنترل ابعاد (Width & Height)

به جای دادن طول و عرض ثابت با استایل داخلی، از درصدهای آماده استفاده کنید:

همین منطق برای ارتفاع با پیشوند h- (مثل h-100) نیز وجود دارد.

⚠️ تله‌های بهینه‌سازی:

• شلوغی کلاس‌ها: اگر برای یک المان بیش از ۱۰ کلاس کمکی می‌نویسید، شاید بهتر باشد یک کلاس CSS اختصاصی تعریف کنید تا کدتان قابل خواندن باقی بماند.
• تداخل سایه‌ها: استفاده از shadow-lg روی المان‌های کوچک باعث می‌شود طراحی شما سنگین و غیرحرفه‌ای به نظر برسد. سایه‌های بزرگ را فقط برای مدال‌ها یا کارت‌های تکی استفاده کنید.
• فراموش کردن d-flex: کلاس‌های تراز‌بندی (مثل justify-content-center) فقط زمانی کار می‌کنند که المانِ والد حتماً کلاس .d-flex را داشته باشد.