Bootstrap 5 Colors

Bootstrap 5 Colors Guide

Bootstrap 5 provides a set of predefined color classes for backgrounds, text, borders, and buttons. These colors help in quickly designing UI elements with consistent styling.

---

1. Bootstrap Color Palette

Bootstrap 5 includes the following color classes:

---

2. Text Colors

You can use .text-* classes to change text color.

<p class="text-primary">This is primary text.</p>
<p class="text-secondary">This is secondary text.</p>
<p class="text-success">This is success text.</p>
<p class="text-danger">This is danger text.</p>
<p class="text-warning">This is warning text.</p>
<p class="text-info">This is info text.</p>
<p class="text-light bg-dark">This is light text.</p>
<p class="text-dark">This is dark text.</p>

---

3. Background Colors

Use .bg-* classes to set background colors.

<div class="p-3 bg-primary text-white">Primary Background</div>
<div class="p-3 bg-secondary text-white">Secondary Background</div>
<div class="p-3 bg-success text-white">Success Background</div>
<div class="p-3 bg-danger text-white">Danger Background</div>
<div class="p-3 bg-warning text-dark">Warning Background</div>
<div class="p-3 bg-info text-white">Info Background</div>
<div class="p-3 bg-light text-dark">Light Background</div>
<div class="p-3 bg-dark text-white">Dark Background</div>

---

4. Border Colors

Use .border with .border-* to change border colors.

<div class="border border-primary p-3">Primary Border</div>
<div class="border border-secondary p-3">Secondary Border</div>
<div class="border border-success p-3">Success Border</div>
<div class="border border-danger p-3">Danger Border</div>
<div class="border border-warning p-3">Warning Border</div>
<div class="border border-info p-3">Info Border</div>
<div class="border border-light p-3">Light Border</div>
<div class="border border-dark p-3">Dark Border</div>

---

5. Opacity (Transparency) Colors

Use .bg-opacity-* classes to adjust background opacity.

<div class="p-3 bg-primary bg-opacity-25">25% Opacity</div>
<div class="p-3 bg-primary bg-opacity-50">50% Opacity</div>
<div class="p-3 bg-primary bg-opacity-75">75% Opacity</div>
<div class="p-3 bg-primary bg-opacity-100">100% Opacity</div>

---

6. Button Colors

Buttons can be styled using color classes like .btn-primary, .btn-danger, etc.

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-danger">Danger Button</button>
<button class="btn btn-warning">Warning Button</button>
<button class="btn btn-info">Info Button</button>
<button class="btn btn-dark">Dark Button</button>

---

7. Alert Colors

Alerts also use Bootstrap colors.

<div class="alert alert-primary">Primary Alert</div>
<div class="alert alert-secondary">Secondary Alert</div>
<div class="alert alert-success">Success Alert</div>
<div class="alert alert-danger">Danger Alert</div>
<div class="alert alert-warning">Warning Alert</div>
<div class="alert alert-info">Info Alert</div>
<div class="alert alert-light">Light Alert</div>
<div class="alert alert-dark">Dark Alert</div>

---

Conclusion

✔ Bootstrap 5 provides predefined text, background, border, and button colors.
✔ .text-*, .bg-*, .border-* help in applying colors easily.
✔ Opacity (.bg-opacity-*) allows for transparent backgrounds.

Want more customization options? Let me know!

Share on Google Plus

About It E Research

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.