Bootstrap 5 Variable Configuration: Customizing Theme Colors and Component Styles

In web development, while Bootstrap’s default styles are beautiful, they often need adjustments to colors, spacing, and other details based on project requirements. Bootstrap 5 provides a powerful variable configuration system that allows you to easily customize theme colors and component styles without deeply modifying the underlying code. This article will guide you through the core methods of variable configuration, suitable for beginners to get started quickly.

Why Use Variable Configuration?¶

Bootstrap 5’s styling core is based on SCSS (Sass) variables, which centrally manage style properties like colors, spacing, borders, and rounded corners. By modifying these variables, you can:
- Quickly replace theme colors (e.g., changing the default blue to a brand purple)
- Adjust default styles of components (e.g., button size, card rounded corners)
- Maintain code consistency and avoid repetitive style writing

Key Point: When directly using Bootstrap via CDN, variable configuration is difficult. It is recommended to install Bootstrap’s SCSS source code and customize variables in your project.

Preparation: Install Bootstrap and SCSS Environment¶

1. Install Bootstrap¶

Open your terminal and run the following command to install Bootstrap:

npm install bootstrap

2. Create Custom SCSS Files¶

Create a new folder (e.g., scss) in your project root directory and add a custom.scss file inside it (this will be the main file for custom variables).

Step 1: Modify Theme Colors¶

Theme colors are the visual core of a website. Bootstrap provides default variables like $primary (primary color), $secondary (secondary color), and $success (success color). Let’s start with modifying the primary color:

1. Import Bootstrap SCSS¶

In custom.scss, first import Bootstrap’s core variables and utility functions (ensuring variables can be overridden correctly):

// Import Bootstrap functions and variables (must come first; otherwise, variable changes won't take effect)
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

// Custom variables (placed after imports to override default variables)
$primary: #6c5ce7; // Change primary color to purple (example color)
$secondary: #00b894; // Change secondary color to green
$success: #ff7675; // Change success color to red

2. Replace Default Colors¶

After modifying these variables, all Bootstrap components relying on them will automatically update. For example:
- Primary color button: <button class="btn btn-primary">Click Me</button> will become purple
- Secondary color background: <div class="bg-secondary">Secondary Area</div> will become green

3. Extend Theme Colors (Optional)¶

If you need additional theme colors (e.g., warning color $warning), simply add the variable directly:

$warning: #ffeaa7; // Change warning color to yellow

Then use it in HTML: <button class="btn btn-warning">Warning</button>

Step 2: Customize Component Styles¶

Beyond theme colors, Bootstrap’s components like buttons, cards, and navbars have independent variables. Here are common scenarios:

1. Button Style Customization¶

Button padding, borders, rounded corners, etc., can be adjusted with variables:

// Button variable examples
$btn-padding-y: 0.5rem; // Button vertical padding (default: 1rem)
$btn-font-weight: 600; // Button font weight (default: 500)
$btn-border-radius: 0.375rem; // Button rounded corners (default: 0.25rem)
$btn-active-shadow: 0 0 0 0.25rem rgba(108, 92, 231, 0.25); // Active state shadow

After modification, all buttons with the btn class will apply the new styles.

2. Card Style Customization¶

Card background, borders, and shadows can be adjusted:

// Card variable examples
$card-bg: #f8f9fa; // Card background color (default: white)
$card-border-radius: 1rem; // Card rounded corners (default: 0.25rem)
$card-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); // Card shadow (default: none)

Use it: <div class="card">...</div> will automatically apply the new styles.

Navbar height, background color, and text size:

// Navbar variable examples
$navbar-padding-y: 0.75rem; // Navbar vertical padding
$navbar-color: #333; // Navbar text color
$navbar-bg: #fff; // Navbar background color

Use it: <nav class="navbar">...</nav>

Compile SCSS to CSS¶

After modifying custom.scss, you need to compile it to CSS for it to take effect. We recommend using dart-sass:

1. Install Compilation Tool¶

npm install -g sass

2. Compilation Command¶

Run in the terminal:

sass scss/custom.scss css/custom.css

This compiles custom.scss to css/custom.css. Then reference it in HTML:

<link rel="stylesheet" href="css/custom.css">

Notes¶

Variable Priority: Variable modifications must come after importing Bootstrap’s SCSS, otherwise they will be overwritten by default styles.
Unit Consistency: When modifying spacing, rounded corners, etc., keep units consistent (e.g., rem or px).
Color Tools: Use online tools like Coolors to generate harmonious color combinations.
Multi-variable Expansion: For modifying multiple components, continue adding new variable definitions.

Summary¶

With Bootstrap 5’s variable configuration, you can efficiently achieve theme customization:
- Use variables like $primary to change theme colors
- Use component-specific variables to modify buttons, cards, etc.
- Use the compiled CSS directly in your project

Variable configuration is the core of Bootstrap’s extensibility. Try modifying different variables to quickly build personalized pages that meet your project’s needs!