Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

How to Use Bootstrap Colors and Make Your UI Pop

What is Bootstrap Colors

Bootstrap colors are a carefully crafted selection of color themes and class names, explicitly designed to enhance user interface development.

Below are the default Bootstrap theme colors.

These colors provide developers with a cohesive and visually appealing foundation for creating user interfaces. By utilizing Bootstrap’s predefined color schemes and corresponding class names, developers can ensure a consistent and professional appearance across various components and elements within a website or application.

This consistency not only enhances the overall user experience but also streamlines the design process. As a result, it makes it more efficient for developers to create visually stunning and user-friendly interfaces.

Bootstrap Color Palette

Bootstrap offers a vibrant palette, from calming blues like primary to bold oranges like warning. This diversity provides options for virtually any website aesthetic.

Additional benefits of the Bootstrap color palette:

  • Accessibility Focus: Each color comes with complementary shades for text and backgrounds, ensuring optimal contrast and readability for all users. Think of subtle text on a primary background or dark text against a light success accent.

  • Customization Potential: Don’t be limited! Bootstrap allows you to customize the core palette or even build your own easily. Imagine swapping primary for a deep purple to create a unique brand identity.

  • Class-based Convenience: Forget messy inline styles. Bootstrap assigns specific classes to each color, making color application a breeze. Add them to your HTML elements for instant vibrancy, like btn-primary for a call to action button.

  • Beyond Texts and Buttons: Go beyond the basics! Bootstrap colors extend to various components, from progress bars to alert messages. Add subtle hints of danger to highlight errors or use info for informative notices.

Bootstrap Theme Colors

All Bootstrap colors are derived from a set of predefined theme colors. These theme colors can be found in the SASS variables and as a SASS map. This makes them highly customizable and extendable for any project. This flexibility allows developers to easily adapt the color scheme to match their specific design requirements.

The theme colors serve as the foundation for various Bootstrap components, including texts, buttons, progress bars, and alert messages. By applying these colors to HTML elements, developers can instantly add vibrancy and visual appeal to their projects. For example, using the btn-primary class on a call-to-action button will give it a distinctive and eye-catching appearance.

Below are the Bootstrap’s predefined theme colors:

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

You can check out the Bootstrap Sass and loop documentation for more theme color customization guides.

Give Purecode a try today to instantly generate thousands of customizable, styled Bootstrap and JavaScript components to accelerate your web development projects.

Using Bootstrap Color for Text Color

To utilize Bootstrap colors for text color, we can take advantage of the text-{color} utility class, which can be applied in combination with any of the predefined Bootstrap colors.

This approach allows for a consistent and easily customizable color scheme throughout your project. The following example demonstrates how to implement this technique:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My webpage</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </head>
  <body class="ps-2">
    <h3 class="text-primary">Hello world (text-primary)</h3>
    <h3 class="text-success">Hello world (text-success)</h3>
    <h3 class="text-warning">Hello world (text-warning)</h3>
    <h3 class="text-danger">Hello world (text-danger)</h3>
    <h3 class="text-dark">Hello world (text-dark)</h3>
    <h3 class="text-light">Hello world (text-light)</h3>
    <h3 class="text-info">Hello world (text-info)</h3>
    <h3 class="text-secondary">Hello world (text-secondary)</h3>
  </body>
</html>

The code provided above will generate an output that displays the phrase “Hello world” styled in various colors, corresponding to the different CSS classes applied to each <h3> element.

These colors are determined by the specific Bootstrap classes used, such as text-primary, text-success, text-warning, text-danger, text-dark, text-light, text-info, and text-secondary.

Each of these classes applies a distinct color to the text, creating a visually diverse output that showcases the range of available text color options within the Bootstrap framework.

Using Bootstrap Color for Background Color

To utilize Bootstrap color for the background of an element, we can apply the bg-{color} class names, where the color is chosen from any of the available Bootstrap color themes. These color themes include primary, success, warning, danger, dark, light, info, and secondary. By incorporating these class names, we can easily modify the background color of various elements within our project, ensuring a visually appealing and consistent design.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My webpage</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </head>
  <body class="ps-2">
    <h3 class="bg-primary">Hello world (bg-primary)</h3>
    <h3 class="bg-success">Hello world (bg-success)</h3>
    <h3 class="bg-warning">Hello world (bg-warning)</h3>
    <h3 class="bg-danger">Hello world (bg-danger)</h3>
    <h3 class="bg-dark text-info">Hello world (bg-dark)</h3>
    <h3 class="bg-light">Hello world (bg-light)</h3>
    <h3 class="bg-info">Hello world (bg-info)</h3>
    <h3 class="bg-secondary">Hello world (bg-secondary)</h3>
  </body>
</html>

The code provided above demonstrates how to apply various background colors to text elements using Bootstrap classes. When viewed in the browser, this code will produce a series of headings, each displaying the text “Hello world” with a distinct background color, as illustrated below:

Background Gradients in Bootstrap

In Bootstrap, you can easily transform a solid background color into a gradient by incorporating an additional bg-gradient class alongside the existing background color class.

The following example demonstrates how you can achieve this effect: To apply a gradient to the background color of an element in Bootstrap, simply add the bg-gradient class in conjunction with the desired background color class, as illustrated in the example below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My webpage</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </head>
  <body class="ps-2">
    <h3 class="bg-primary bg-gradient">Hello world (bg-primary bg-gradient)</h3>
    <h3 class="bg-success bg-gradient">Hello world (bg-success bg-gradient)</h3>
    <h3 class="bg-warning bg-gradient">Hello world (bg-warning bg-gradient)</h3>
    <h3 class="bg-danger bg-gradient">Hello world (bg-danger bg-gradient)</h3>
    <h3 class="bg-dark bg-gradient text-info">
      Hello world (bg-dark bg-gradient)
    </h3>
    <h3 class="bg-light bg-gradient">Hello world (bg-light bg-gradient)</h3>
    <h3 class="bg-info bg-gradient">Hello world (bg-info bg-gradient)</h3>
    <h3 class="bg-secondary bg-gradient">
      Hello world (bg-secondary bg-gradient)
    </h3>
  </body>
</html>

This enhancement allows you to create visually appealing and dynamic designs for your web elements. The above snippet will produce the following:

Adding Background Color to Buttons in Bootstrap

You can also apply background colors to buttons in Bootstrap to convey different meanings or emphasize specific actions. To achieve this, you can utilize the btn-{color} utility class. The following example illustrates how to use this class to customize the background color of a button:

The following source code example demonstrates how to utilize this class to modify the background color of a button:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My webpage</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </head>
  <body class="p-2 d-flex justify-content-center gap-2">
    <button class="btn-primary border-0 rounded-pill small">Click me</button>
    <button class="btn-success border-0 rounded-pill small">Click me</button>
    <button class="btn-warning border-0 rounded-pill small">Click me</button>
    <button class="btn-info border-0 rounded-pill small">Click me</button>
    <button class="btn-danger border-0 rounded-pill small">Click me</button>
    <button class="btn-dark border-0 rounded-pill small">Click me</button>
  </body>
</html>

Adding Background Color to Badges

You can easily enhance the appearance of your badge components by incorporating background colors alongside the badge utility class. By doing so, you’ll create visually appealing and functional badges that can be used throughout your project to display important information or highlight specific elements.

This customization allows you to match the badge colors with your overall design theme, ensuring a cohesive and professional look.

Source code examples:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My webpage</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </head>
  <body class="p-2 d-flex justify-content-center gap-2">
    <span class="badge bg-primary">New</span>
    <span class="badge bg-secondary">Pro</span>
    <span class="badge bg-danger">Old</span>
    <span class="badge bg-warning">Bad</span>
    <span class="badge bg-info">Pay</span>
    <span class="badge bg-dark">Tag</span>
  </body>
</html>

Customizing Links with Bootstrap Colors

To customize links effectively, you can take advantage of the link-{color} utility class provided by Bootstrap. This versatile class allows you to easily apply various color schemes to your links, ensuring that they blend seamlessly with the overall design of your website or application.

One of the key benefits of using the link-{color} utility class is that it not only modifies the default color of the links but also takes care of styling the hover and focus states. This ensures that your links maintain a consistent appearance and behavior throughout the different user interactions, ultimately enhancing the user experience.

Source code example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My webpage</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </head>
  <body class="ps-2 d-flex flex-column">
    <a href="#" class="link-primary">Primary link</a>
    <a href="#" class="link-secondary">Secondary link</a>
    <a href="#" class="link-success">Success link</a>
    <a href="#" class="link-danger">Danger link</a>
    <a href="#" class="link-warning">Warning link</a>
    <a href="#" class="link-info">Info link</a>
    <a href="#" class="link-light">Light link</a>
    <a href="#" class="link-dark">Dark link</a>
  </body>
</html>

By leveraging the power of Bootstrap’s color palette, you can create visually appealing and accessible links that cater to a wide range of design preferences. Whether you’re looking to create a subtle, professional appearance or a bold, eye-catching design, the link-{color} utility class offers a simple and efficient solution for customizing your links to suit your unique requirements.

Bootstrap Color Frequently Asked Questions

Q1: How to set text color in Bootstrap 4?

Ans: To set the text color in Bootstrap 4, you can utilize the text-{color} utility class, where {color} represents any color from the Bootstrap color palette. This allows you to easily apply the desired color to your text elements, ensuring that your design remains consistent and visually appealing throughout your project. By using the text-{color} utility class, you can quickly and efficiently customize the appearance of your text without the need for additional CSS or inline styles.

Q2: How to change the background color of the Bootstrap icon?

Ans: To modify the background color of an icon in Bootstrap, you can take advantage of the bg-{color} utility class, where {color} represents any color from the Bootstrap color palettes. This utility class allows you to easily customize the appearance of your icon’s background without having to write extra CSS or inline styles. By utilizing the predefined color options available within the Bootstrap framework, you can maintain a consistent and visually appealing design throughout your project, ensuring that your icons seamlessly blend with the rest of your layout.

Q3: How do I customize my Bootstrap color?

Ans: To customize the colors in your Bootstrap project and ensure they align with your brand’s theme, you can follow the guidelines provided in the official documentation. The documentation offers a comprehensive guide on how to modify the predefined color options within the Bootstrap framework to create a consistent and visually appealing design throughout your project. By following these instructions, you can easily tailor the appearance of your icons, buttons, and other elements to seamlessly blend with the rest of your layout, without the need for additional CSS or inline styles.

Wrapping Up Bootstrap Colors

Understanding and effectively using Bootstrap colors can greatly enhance the design and user experience of your website or application.

Bootstrap colors have predefined color themes and class names that enhance UI development. They offer a vibrant palette that provides options for any website aesthetic, with a focus on accessibility, customization potential, class-based convenience, and applicability beyond just text and buttons.

This guide has provided you with an in-depth look at Bootstrap’s color palette, and theme colors, and how to apply them to text, backgrounds, and links.

We also addressed common questions related to using and customizing Bootstrap colors. With this knowledge, you can now use Bootstrap to create more visually appealing and accessible user interfaces with ease and efficiency.

Happy coding and complement of the season! 🎊 🎊 🎊

Checkout Purecode!

I recommend you try out Purecode, an AI tool that can generate custom HTML, CSS, and JavaScript components. Here are some of its features:

  • It uses an AI assistant to generate thousands of responsive pre-made components for you.
  • The components come with default styling using CSS, Tailwind CSS, or your own custom styles so you can match your brand’s design.
  • You can easily customize the generated components to suit your specific needs – change colors, spacing, paddings, margins, etc.
  • It generates both the HTML markup and CSS styles for the components, saving you development time.
  • It also includes some JavaScript functionality within the components to make them interactive.
Ayodele Samuel Adebayo

Ayodele Samuel Adebayo