Bootstrap 5 Colors

Bootstrap is a widely-used front-end development framework that provides pre-built CSS and JavaScript components for creating responsive websites. Although Bootstrap has a functional and visually appealing default color scheme, customizing it to fit your brand or design preferences can help enhance the overall look of your website. In this article, we'll explore how you can easily customize the color scheme of your website to make it more visually appealing and aligned with your brand identity.

To start customizing color scheme, identify the CSS variables that control the colors you want to modify. You can find a comprehensive list of available variables in the documentation. After identifying the variables you need to override, you can set new values in your custom CSS file or the head section of your HTML file.

Example

To change the primary colors of your website to red, you can set the "--bs-primary" variable to #ff0000 in your custom CSS file. This simple modification can go a long way in creating a unique visual identity for your website.

:root,
[data-bs-theme=light] { {
	--bs-primary: #ff0000;
	--bs-primary-rgb: 255, 0, 0;
}

You can similarly modify the color of other components, like badges or alerts, by overriding their respective CSS variables. Additionally, you can create custom color schemes by defining a set of related variables. For instance, you could create a new color scheme called "dark" that overrides the default colors with darker shades.

Example

[data-bs-theme=dark] {
  color-scheme: dark;
  --bs-body-color: #adb5bd;
  --bs-body-color-rgb: 173, 181, 189;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(173, 181, 189, 0.75);
  --bs-secondary-color-rgb: 173, 181, 189;
  --bs-secondary-bg: #343a40;
  --bs-secondary-bg-rgb: 52, 58, 64;
  --bs-tertiary-color: rgba(173, 181, 189, 0.5);
  --bs-tertiary-color-rgb: 173, 181, 189;
  --bs-tertiary-bg: #2b3035;
  --bs-tertiary-bg-rgb: 43, 48, 53;
  --bs-primary-text-emphasis: #6ea8fe;
  --bs-secondary-text-emphasis: #a7acb1;
  --bs-success-text-emphasis: #75b798;
  --bs-info-text-emphasis: #6edff6;
  --bs-warning-text-emphasis: #ffda6a;
  --bs-danger-text-emphasis: #ea868f;
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;
  --bs-primary-bg-subtle: #031633;
  --bs-secondary-bg-subtle: #161719;
  --bs-success-bg-subtle: #051b11;
  --bs-info-bg-subtle: #032830;
  --bs-warning-bg-subtle: #332701;
  --bs-danger-bg-subtle: #2c0b0e;
  --bs-light-bg-subtle: #343a40;
  --bs-dark-bg-subtle: #1a1d20;
  --bs-primary-border-subtle: #084298;
  --bs-secondary-border-subtle: #41464b;
  --bs-success-border-subtle: #0f5132;
  --bs-info-border-subtle: #087990;
  --bs-warning-border-subtle: #997404;
  --bs-danger-border-subtle: #842029;
  --bs-light-border-subtle: #495057;
  --bs-dark-border-subtle: #343a40;
  --bs-link-color: #6ea8fe;
  --bs-link-hover-color: #8bb9fe;
  --bs-link-color-rgb: 110, 168, 254;
  --bs-link-hover-color-rgb: 139, 185, 254;
  --bs-code-color: #e685b5;
  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;
}

By defining your custom color scheme, you can apply it to your website by setting the data-bs-theme attribute to any HTML elements or to any Bootstrap components. This can help create a unique and memorable visual identity for your brand, which can ultimately boost your online presence and attract more visitors.

Example

<div class="p-4 text-body bg-body" data-bs-theme="dark">
  <div class="h4">Example Dark theme</div>
  <p>Proin id libero tempor, scelerisque dui sit amet, iaculis turpis. Ut sit amet vestibulum augue, non commodo ligula</p>
  <hr class="my-4">
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonCustom" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown button
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonCustom">
      <li><a class="dropdown-item active" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

In conclusion, customizing the color scheme of your website is a simple but effective way to create a visually appealing website that aligns with your brand identity. Using Bootstrap's flexible CSS variables, you can modify the colors of different components to create a cohesive look and feel that resonates with your target audience. So go ahead and experiment with different color schemes until you find the perfect fit for your website!