1️⃣ Borders (حاشیه‌ها)

• کلاس‌ها: border, border-top, border-bottom, border-start, border-end

• اضافه کردن حاشیه به تمام جهات یا فقط یک جهت.

• مثال:

<div class="border p-3">حاشیه در همه جهاتdiv>
<div class="border-top border-3 border-primary p-2">حاشیه بالا ضخیم و آبیdiv>

Border Width (ضخامت)

• border-1 تا border-5 → افزایش ضخامت خط حاشیه.

Border Color (رنگ)

• border-primary, border-success, border-danger, ...

Border Radius (گرد کردن گوشه‌ها)

• rounded → گوشه‌ها کمی گرد

• rounded-sm → کمتر گرد

• rounded-lg → بیشتر گرد

• rounded-circle → دایره کامل (مناسب تصاویر)

• rounded-pill → کپسولی

<img src="..." class="rounded-circle" alt="دایره">
<div class="rounded-pill bg-primary text-white p-2">کپسولیdiv>

2️⃣ Float and Clearfix

• Float: حرکت عنصر به چپ یا راست

  • float-start → چپ

  • float-end → راست

  • float-none → بدون float

• Clearfix: جلوگیری از شکسته شدن والدها به دلیل float فرزند

  • کلاس: clearfix

Responsive Floats

• float-sm-start, float-md-end → Float فقط در سایزهای مشخص

<img src="..." class="float-start me-3" alt="تصویر">
<div class="clearfix">div>

3️⃣ Center Align

• متن: text-center → ترازبندی متن به مرکز

• عناصر بلوکی: mx-auto → حاشیه افقی خودکار برای مرکز کردن

<p class="text-center">متن وسط چینp>
<div class="w-50 mx-auto bg-light p-2">بلوک وسط صفحهdiv>

4️⃣ Width / Height

• عرض: w-25, w-50, w-75, w-100, w-auto

• ارتفاع: h-25, h-50, h-75, h-100, h-auto

<div class="w-50 h-50 bg-secondary">div>

5️⃣ Spacing (فاصله‌ها)

• Margin: m-{t|b|s|e|x|y}-value

• Padding: p-{t|b|s|e|x|y}-value

• مقدارها: 0 → 5 (۰ تا ۳rem)

<div class="mt-3 mb-2 p-4 bg-light">مثال فاصلهdiv>

6️⃣ Shadows (سایه‌ها)

• shadow-sm → سایه کوچک

• shadow → سایه متوسط

• shadow-lg → سایه بزرگ

• shadow-none → بدون سایه

<div class="shadow p-3 mb-2 bg-white">کارت با سایهdiv>

7️⃣ Vertical Align

• align-baseline, align-top, align-middle, align-bottom, align-text-top, align-text-bottom

• مناسب برای ترازبندی عناصر در کنار متن یا تصاویر

<img src="..." class="align-middle me-2" alt="تصویر">
<span>متن در کنار تصویرspan>

8️⃣ Aspect Ratio

• حفظ نسبت تصویر یا بلوک‌ها

• کلاس‌ها: ratio, ratio-1x1, ratio-16x9, ratio-4x3, ratio-21x9

<div class="ratio ratio-16x9">
  <iframe src="..." title="ویدئو" allowfullscreen>iframe>
div>

9️⃣ Visibility

• visible → نمایش

• invisible → پنهان (حضور در DOM حفظ می‌شود)

<p class="invisible">این متن مخفی است اما جای آن حفظ شدهp>

🔟 Close Icon

• کلاس btn-close → دکمه بستن

• رنگ سفید: btn-close-white

<button type="button" class="btn-close" aria-label="بستن">button>

1️⃣1️⃣ Screenreaders

• visually-hidden → مخفی کردن از دید کاربران عادی، قابل خواندن توسط screen reader

<span class="visually-hidden">متن برای کاربران screen readerspan>

1️⃣2️⃣ Colors / Background Colors

• متن: text-primary, text-success, text-danger …

• پس‌زمینه: bg-primary, bg-success, bg-danger …

<p class="text-danger">متن قرمزp>
<div class="bg-success text-white p-2">پس‌زمینه سبزdiv>