CSS Variables in Bootstrap

Under Customize > CSS Variables Bootstrap includes around many custom properties or CSS variables that can be used to retrieve many of the Bootstrap custom values including colors, fonts and breakpoints.

Note

There are two versions of variables, one for light and the other for dark themes. It is important to modify both where applicable.

:root,
[data-bs-theme=light] {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  ../
}

[data-bs-theme=dark] {
  color-scheme: dark;
  --bs-body-color: #dee2e6;
  --bs-body-color-rgb: 222, 226, 230;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;
  --bs-emphasis-color: #fff;
  ../
}

NOTE

While it is possible to change the values of any of these variables, it will not change any of the classes created by Bootstrap.

The above variables can be used in any custom CSS added after the Bootstrap stylesheet is loaded using the var() function.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}

a {
  color: var(--blue);
}

NOTE

While the Bootstrap does offer breakpoint variables, they cannot be used in CSS and are intended to be used with JavaScript only.