Bootstrap 4 Colors: A Comprehensive Guide with Examples

Bootstrap 4 is a popular front-end framework that offers a wide range of design components and utilities for creating responsive and visually appealing websites. One of the key features of Bootstrap 4 is its color system, which allows developers to easily apply colors to various elements on their web pages. In this article, we will explore the different colors provided by Bootstrap 4 and provide examples of how to use them effectively in your projects.

1. Introduction to Bootstrap 4 Colors

Bootstrap 4 provides a set of predefined color classes that you can apply to different elements in your HTML markup. These color classes allow you to quickly and easily change the text and background colors of various components, such as buttons, headings, alerts, and more. By using Bootstrap 4 colors, you can ensure consistency and visual harmony throughout your website.

2. Text Colors

Bootstrap 4 offers a variety of text color classes that can be applied to any HTML element. These classes enable you to change the color of the text within an element. For example, you can use the class “text-primary” to display text in a primary color, or “text-danger” to highlight important information in red.


<p class="text-primary">This is a paragraph with primary text color.</p>

3. Background Colors

In addition to text colors, Bootstrap 4 also provides background color classes that allow you to change the background color of an element. By applying these classes, you can create visually appealing sections or highlight specific content on your webpage.


<div class="bg-primary">
    <h2>This is a heading with a primary background color.</h2>

4. Contextual Colors

Bootstrap 4 includes contextual color classes that represent different semantic meanings. These classes help convey information or provide visual cues to the users. For instance, you can use the class “bg-info” to indicate informational content or “text-warning” to highlight a cautionary message.


<p class="text-info">This is an informational message.</p>

5. State Colors

State colors in Bootstrap 4 are used to represent the status of an element or provide feedback to the user. For example, you can apply the class “text-success” to indicate a successful operation or “bg-danger” to highlight an error or failure.


<button class="btn btn-success">Submit</button>

6. Gradient Colors

Bootstrap 4 also supports gradient colors, which can add depth and visual interest to your website. You can apply gradient color classes to elements to create stylish backgrounds or eye-catching design elements.


<div class="bg-gradient-primary">
    <h3>This is a heading with a gradient background.</h3>

7. Usage Examples

Now, let’s see some practical examples of using Bootstrap 4 colors in real-world scenarios:

Example 1: Buttons with Different Colors

<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>

Example 2: Alert Messages

<div class="alert alert-info" role="alert">
    This is an informational alert message.
<div class="alert alert-warning" role="alert">
    This is a warning alert message.

8. Conclusion

Bootstrap 4 colors provide a convenient and flexible way to style your web pages. By leveraging the predefined color classes, you can create visually appealing and consistent designs. Whether you want to highlight important information, indicate different states, or create eye-catching elements, Bootstrap 4 colors have got you covered.

9. Frequently Asked Questions (FAQs)

How can I customize the colors in Bootstrap 4?

Bootstrap 4 provides a variety of customization options through Sass variables. You can modify these variables to create your own color scheme.

Can I use custom color classes in Bootstrap 4?

Yes, you can define your custom color classes by extending or overriding the existing ones in Bootstrap 4.

Are the color classes responsive in Bootstrap 4?

Yes, Bootstrap 4 color classes are responsive by default and adapt to different screen sizes.

Can I use Bootstrap 4 colors in conjunction with CSS frameworks like Material Design?

Yes, Bootstrap 4 colors can be combined with other CSS frameworks to achieve unique and visually appealing designs.

Where can I find more information about Bootstrap 4 colors?

You can refer to the official Bootstrap documentation for detailed information about colors and their usage.

Leave a Comment