بوت‌استرپ یک سری رنگ آماده داره که می‌تونی هم روی متن‌ها و هم روی پس‌زمینه‌ها (Background) استفاده کنی.

📌 1. رنگ متن‌ها (Text Colors)

برای تغییر رنگ متن‌ها از کلاس‌های زیر استفاده می‌کنیم:

<p class="text-primary">متن آبی (primary)</p>
<p class="text-secondary">متن خاکستری (secondary)</p>
<p class="text-success">متن سبز (success)</p>
<p class="text-danger">متن قرمز (danger)</p>
<p class="text-warning">متن زرد/نارنجی (warning)</p>
<p class="text-info">متن فیروزه‌ای (info)</p>
<p class="text-light bg-dark">متن روشن (light) روی پس‌زمینه تیره</p>
<p class="text-dark">متن تیره (dark)</p>
<p class="text-muted">متن کم‌رنگ (muted)</p>
<p class="text-white bg-dark">متن سفید روی پس‌زمینه تیره</p>

📌 2. رنگ پس‌زمینه‌ها (Background Colors)

برای پس‌زمینه از کلاس‌های .bg-* استفاده می‌کنیم:

<div class="bg-primary text-white p-3">پس‌زمینه آبی</div>
<div class="bg-secondary text-white p-3">پس‌زمینه خاکستری</div>
<div class="bg-success text-white p-3">پس‌زمینه سبز</div>
<div class="bg-danger text-white p-3">پس‌زمینه قرمز</div>
<div class="bg-warning text-dark p-3">پس‌زمینه زرد</div>
<div class="bg-info text-dark p-3">پس‌زمینه فیروزه‌ای</div>
<div class="bg-light text-dark p-3">پس‌زمینه روشن</div>
<div class="bg-dark text-white p-3">پس‌زمینه تیره</div>
<div class="bg-white text-dark p-3">پس‌زمینه سفید</div>

📌 3. رنگ‌های شفاف (Opacity colors)

بوت‌استرپ نسخه ۵ قابلیت رنگ‌های شفاف هم داره. مثلاً:

<div class="bg-primary bg-opacity-25 p-3">Primary 25%</div>
<div class="bg-success bg-opacity-50 p-3">Success 50%</div>
<div class="bg-danger bg-opacity-75 p-3">Danger 75%</div>
<div class="bg-dark bg-opacity-10 p-3">Dark 10%</div>

📌 4. رنگ‌های Border

برای رنگ دادن به حاشیه‌ها از .border-* استفاده می‌کنیم:

<div class="border border-primary p-2">Border آبی</div>
<div class="border border-success p-2">Border سبز</div>
<div class="border border-danger p-2">Border قرمز</div>

✅ نتیجه:

• .text-* → رنگ متن‌ها

• .bg-* → رنگ پس‌زمینه‌ها

• .border-* → رنگ حاشیه‌ها

• .bg-opacity-* → شفافیت رنگ