How Can I Change the Primary Color in Bootstrap 4, 5, and 5.3?

Customizing Bootstrap Primary Color

Changing the default primary color in Bootstrap is feasible, allowing you to align the color scheme with your brand identity.

Bootstrap 5.3 (Updated 2023)

To modify the primary color, you can leverage the existing color variable, $orange, as follows:

// Import necessary Bootstrap files
@import "functions";
@import "variables";

// Set the $primary variable to your desired color
$primary: orange;

// Merge the custom color with the existing $theme-colors map
$theme-colors: map-merge($theme-colors, ("primary": $primary));

// Apply the changes by importing Bootstrap
@import "bootstrap";

Bootstrap 5 (Updated 2021)

In Bootstrap 5, the approach remains the same. You can set the theme variable and import the Bootstrap stylesheet:

$primary: rebeccapurple;

// Ensure you use the full path to bootstrap.scss
@import "bootstrap";

Bootstrap 4

For Bootstrap 4, set the appropriate theme color variable before importing bootstrap.scss:

$primary: purple;
$danger: red;

@import "bootstrap";

In cases where you wish to derive the new color from an existing Bootstrap variable, import the functions and variables files first:

@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: ("primary": $purple);

@import "bootstrap";

The above is the detailed content of How Can I Change the Primary Color in Bootstrap 4, 5, and 5.3?. For more information, please follow other related articles on the PHP Chinese website!