Bootstrap - CSS Variables: A Beginner's Guide

Hello there, future web developers! Today, we're going to dive into the wonderful world of CSS variables in Bootstrap. Don't worry if you're new to this; I'll guide you through each step as if we're sitting together in a cozy classroom. Let's embark on this exciting journey!

Bootstrap - CSS Variables

What are CSS Variables?

Before we jump into Bootstrap-specific variables, let's understand what CSS variables are. CSS variables, also known as CSS custom properties, allow you to store specific values to be reused throughout your stylesheet. Think of them as little containers holding your favorite colors, sizes, or any other CSS value.

Root Variables

In Bootstrap, root variables are the foundation of the entire variable system. They're defined in the :root selector, which represents the highest level of your document tree.

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
}

These variables define the core colors used throughout Bootstrap. For example, --bs-blue is Bootstrap's primary blue color. You can use these variables in your own CSS like this:

.my-element {
  color: var(--bs-blue);
}

Default Variables

Bootstrap also provides a set of default variables that are used to style various components. These variables often reference the root variables we just saw.

:root {
  --bs-primary: var(--bs-blue);
  --bs-secondary: var(--bs-gray-600);
  --bs-success: var(--bs-green);
  --bs-info: var(--bs-cyan);
  --bs-warning: var(--bs-yellow);
  --bs-danger: var(--bs-red);
  --bs-light: var(--bs-gray-100);
  --bs-dark: var(--bs-gray-900);
}

Here, --bs-primary is set to use the value of --bs-blue. This allows for easy theming and consistency across your project.

Dark Mode Variables

Bootstrap 5 introduced built-in dark mode support using CSS variables. These variables change their values when dark mode is activated.

[data-bs-theme="dark"] {
  --bs-body-color: #adb5bd;
  --bs-body-bg: #212529;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255,255,255;
}

When the data-bs-theme="dark" attribute is applied to an element (usually the <html> or <body>), these variables override their light mode counterparts, instantly transforming your site into dark mode. Cool, right?

Component Variables

Bootstrap components also use CSS variables for styling. This makes it easy to customize individual components without affecting others.

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
}

These variables control every aspect of a primary button's appearance. Want to change the hover color? Just modify --bs-btn-hover-bg!

Prefix

Bootstrap uses the bs- prefix for all its variables to avoid conflicts with your custom variables or those from other libraries. If you're creating your own variables, it's a good practice to use your own prefix.

:root {
  --my-awesome-color: #ff69b4;
}

Examples

Let's put our knowledge into practice with a few examples:

Changing the primary color:

:root {
  --bs-primary: #ff69b4; /* Hot pink is the new blue! */
}

Creating a custom button:

.btn-awesome {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--my-awesome-color);
  --bs-btn-border-color: var(--my-awesome-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ff1493; /* Deeper pink on hover */
  --bs-btn-hover-border-color: #ff1493;
}

Adjusting the body background in dark mode:

[data-bs-theme="dark"] {
  --bs-body-bg: #000; /* Pitch black background */
}

Focus Variables

Bootstrap also provides variables for focus states, ensuring accessibility across your site:

:root {
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
}

These variables control the appearance of focus rings around interactive elements.

Grid Breakpoints

Last but not least, Bootstrap's responsive grid system is also controlled by CSS variables:

:root {
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
}

These variables define the widths at which your layout will change to accommodate different screen sizes.

Summary

Here's a quick reference table of the main types of CSS variables we've covered:

Variable Type	Purpose	Example
Root Variables	Define core values	`--bs-blue: #0d6efd;`
Default Variables	Set theme colors	`--bs-primary: var(--bs-blue);`
Dark Mode Variables	Control dark theme	`--bs-body-bg: #212529;`
Component Variables	Style specific components	`--bs-btn-bg: var(--bs-primary);`
Focus Variables	Control focus states	`--bs-focus-ring-width: 0.25rem;`
Grid Breakpoints	Define responsive breakpoints	`--bs-breakpoint-md: 768px;`

And there you have it! You've just taken your first steps into the world of Bootstrap CSS variables. Remember, the key to mastering this is practice. Try tweaking these variables in your projects and see how they affect your design. Happy coding, and don't forget to have fun with it!

Credits: Image by storyset

Previous Tutorial:

Bootstrap - RTL

Next Tutorial:

Bootstrap - Color Modes