BS5 Colors

Bootstrap 5 provides a comprehensive set of color classes that you can use to apply various color styles to your elements. These classes allow you to easily customize the color scheme of your website. Here are the color-related classes available in Bootstrap 5:


1. **Text Color**: You can change the text color using classes such as `.text-primary`, `.text-secondary`, `.text-success`, `.text-danger`, `.text-warning`, `.text-info`, `.text-light`, and `.text-dark`. These classes apply different color styles to the text.

html
<p class="text-primary">Primary colored text</p>
<p class="text-success">Success colored text</p>
<p class="text-danger">Danger colored text</p>

2. **Background Color**: Bootstrap offers classes to set the background color of an element using `.bg-primary`, `.bg-secondary`, `.bg-success`, `.bg-danger`, `.bg-warning`, `.bg-info`, `.bg-light`, and `.bg-dark`. These classes apply different background color styles.

html
<div class="bg-primary">Primary background color</div>
<div class="bg-success">Success background color</div>
<div class="bg-danger">Danger background color</div>

3. **Contextual Colors**: Bootstrap provides contextual color classes that can be used for various purposes, such as buttons, alerts, badges, and more. These classes include `.primary`, `.secondary`, `.success`, `.danger`, `.warning`, `.info`, `.light`, and `.dark`.

html
<button class="btn btn-primary">Primary Button</button>
<span class="badge bg-success">Success Badge</span>
<div class="alert alert-warning">Warning Alert</div>

4. **Custom Colors**: Bootstrap also allows you to create your own color styles using the `.text-{color}`, `.bg-{color}`, and `.border-{color}` classes, where `{color}` can be replaced with a custom color name or hexadecimal code.

html
<p class="text-mycolor">Custom text color</p>
<div class="bg-mycolor">Custom background color</div>
<div class="border-mycolor">Custom border color</div>

These are just a few examples of the color classes available in Bootstrap 5. You can combine these classes with other Bootstrap components to create visually appealing and customized color schemes for your website. For more details and additional options, consult the official Bootstrap documentation on colors.



About the Author



Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc





 PreviousNext