Bootstrap - CSS Variables

Ethan D. - June 1, 2024

Setting up Bootstrap with CSS Variables

To start using CSS variables in Bootstrap, you need to include the Bootstrap CSS file in your project. Add the following code in the <head> section of your HTML file:

Example: Include Bootstrap CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

This loads the latest version of Bootstrap's CSS file from a CDN.

Next, define your custom CSS variables. CSS variables, also called CSS custom properties, allow you to store and reuse values in your stylesheets. To define a CSS variable, use the double-dash (--) syntax followed by the variable name and its value:

Example: Define CSS Variables

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-size-base: 16px;
}

This example defines three CSS variables: --primary-color, --secondary-color, and --font-size-base. Use these variables later in your stylesheets to apply colors and font sizes to your Bootstrap components.

Bootstrap has its own default variables that you can override with your values. These variables are defined in Bootstrap's source code and control the framework's styling. To override a Bootstrap variable, redefine it with your value:

Example: Override Bootstrap Variables

:root {
  --bs-blue: #007bff;
  --bs-green: #28a745;
  --bs-body-font-size: 16px;
}

This overrides Bootstrap's default --bs-blue and --bs-green variables with your colors, and changes the --bs-body-font-size variable to set the default font size for the <body> element.

Setting up Bootstrap with CSS variables gives you the flexibility to customize and maintain a visual style in your project. You can update colors, sizes, and other properties in one place, and the changes will be applied to all the components that use those variables.

Using CSS Variables in Bootstrap Components

Bootstrap components can be customized using CSS variables, giving you control over their appearance. Let's see how to use CSS variables to style buttons, navbars, cards, and forms.

Buttons

Buttons are interactive elements in web design. With CSS variables, you can customize button colors, sizes, and states. To change the color of a button, modify the --bs-btn-bg and --bs-btn-color variables:

Example title

.btn-primary {
  --bs-btn-bg: var(--primary-color);
  --bs-btn-color: #fff;
}

This sets the background color of the primary button to the value of the --primary-color variable and the text color to white.

Button sizes can be adjusted by changing the --bs-btn-padding-y and --bs-btn-padding-x variables:

Example title

.btn-lg {
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-padding-x: 1.5rem;
}

This increases the padding of the large button variant.

To style button states (hover, active, focus), use the --bs-btn-hover-bg, --bs-btn-active-bg, and --bs-btn-focus-box-shadow variables:

Example title

.btn-primary {
  --bs-btn-hover-bg: #0056b3;
  --bs-btn-active-bg: #004085;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.5);
}

This changes the background color on hover and active states and adds a box shadow on focus.

Navbar

The navbar is a responsive navigation header that can be customized using CSS variables. To change the background color of the navbar, modify the --bs-navbar-bg variable:

Example title

.navbar {
  --bs-navbar-bg: var(--secondary-color);
}

This sets the navbar background color to the value of the --secondary-color variable.

Navbar links can be styled by adjusting the --bs-navbar-color and --bs-navbar-hover-color variables:

Example title

.navbar-nav {
  --bs-navbar-color: #fff;
  --bs-navbar-hover-color: rgba(255, 255, 255, 0.8);
}

This sets the color of navbar links to white and changes the color on hover.

The navbar brand, typically a logo or text, can be customized using the --bs-navbar-brand-color and --bs-navbar-brand-hover-color variables:

Example title

.navbar-brand {
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: rgba(255, 255, 255, 0.8);
}

This styles the navbar brand color and its hover state.

Cards

Cards are content containers that can be customized with CSS variables. To change the background color of a card, modify the --bs-card-bg variable:

Example title

.card {
  --bs-card-bg: #f8f9fa;
}

This sets the card background color to a light gray.

Card borders can be styled by adjusting the --bs-card-border-color and --bs-card-border-width variables:

Example title

.card {
  --bs-card-border-color: #dee2e6;
  --bs-card-border-width: 1px;
}

This changes the color and width of the card border.

To modify the text color within a card, use the --bs-card-color variable:

Example title

.card {
  --bs-card-color: #212529;
}

This sets the text color inside the card to a dark gray.

Forms

Forms are used for user input and interaction. With CSS variables, you can customize form input colors, label styles, and validation colors. To change the color of form inputs, modify the --bs-input-bg, --bs-input-color, and --bs-input-border-color variables:

Example title

.form-control {
  --bs-input-bg: #fff;
  --bs-input-color: #495057;
  --bs-input-border-color: #ced4da;
}

This sets the background color, text color, and border color of form inputs.

Form labels can be styled using the --bs-form-label-color variable:

Example title

.form-label {
  --bs-form-label-color: #6c757d;
}

This changes the color of form labels to a gray tone.

Form validation colors can be customized with the --bs-form-valid-color and --bs-form-invalid-color variables:

Example title

.form-control {
  --bs-form-valid-color: #198754;
  --bs-form-invalid-color: #dc3545;
}

This sets the colors for valid and invalid form input states.

Creating Custom Themes with CSS Variables

CSS variables let you create custom themes for your Bootstrap projects. By defining a color palette using CSS variables and applying it to Bootstrap components, you can customize the look and feel of your website. CSS variables allow you to create multiple themes that can be switched dynamically.

To start creating a custom theme, define a color palette using CSS variables. Choose a set of colors that complement each other and represent your brand or design style.

Example: Define a Color Palette Using CSS Variables

:root {
  --theme-primary: #007bff;
  --theme-secondary: #6c757d;
  --theme-success: #28a745;
  --theme-warning: #ffc107;
  --theme-danger: #dc3545;
  --theme-info: #17a2b8;
  --theme-light: #f8f9fa;
  --theme-dark: #343a40;
}

Next, apply the custom theme to Bootstrap components by mapping the CSS variables to Bootstrap's default variables. You can do this by redefining Bootstrap's variables with your theme variables:

Example: Apply Custom Theme to Bootstrap Components

.btn-primary {
  --bs-btn-bg: var(--theme-primary);
  --bs-btn-border-color: var(--theme-primary);
  --bs-btn-hover-bg: #0069d9;
  --bs-btn-hover-border-color: #0062cc;
}

.navbar {
  --bs-navbar-bg: var(--theme-dark);
  --bs-navbar-color: var(--theme-light);
  --bs-navbar-hover-color: rgba(255, 255, 255, 0.8);
}

.card {
  --bs-card-bg: var(--theme-light);
  --bs-card-color: var(--theme-dark);
  --bs-card-border-color: rgba(0, 0, 0, 0.125);
}

To create multiple themes, define separate sets of CSS variables for each theme and apply them conditionally. You can use class names or data attributes to switch between themes.

Example: Define Separate Sets of CSS Variables for Each Theme

:root {
  --theme-primary: #007bff;
  --theme-secondary: #6c757d;
}

[data-theme="dark"] {
  --theme-primary: #ff6b6b;
  --theme-secondary: #4ecdc4;
}

To switch between themes dynamically, you can use JavaScript to toggle the data-theme attribute on the <html> or <body> element:

Example: Switch Between Themes Dynamically Using JavaScript

const toggleTheme = () => {
  document.documentElement.setAttribute('data-theme', 
    document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
  );
}