Search code examples
csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

How to change the bootstrap primary color?

Is it possible to change the bootstrap primary color to match to the brand color? I am using bootswatch's paper theme in my case.

Solution

  • Bootstrap 5.3 (update 2023)

    Here's an example using an existing color variable ($orange).

    // required to get $orange variable
@import "functions"; 
@import "variables";

$primary: $orange; // set the $primary variable

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

// set changes
@import "bootstrap";

    https://codeply.com/p/qFez3k8oIF

    Bootstrap 5 (update 2021)

    The SASS override method is still the same for Bootstrap 5. If you're not referencing any existing Bootstrap variables to set the the new colors, you just need to set the theme variable(s) and @import bootstrap

    $primary: rebeccapurple;

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

    https://codeply.com/p/iauLPArGqE

    Bootstrap 4*

    To change the primary, or any of the theme colors in Bootstrap 4 SASS, set the appropriate variables before importing bootstrap.scss. This allows your custom scss to override the !default values...

    $primary: purple;
$danger: red;

@import "bootstrap";

    Demo: https://codeply.com/go/f5OmhIdre3

    In some cases, you may want to set a new color from another existing Bootstrap variable. For this @import the functions and variables first so they can be referenced in the customizations...

    /* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

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

/* finally, import Bootstrap */
@import "bootstrap";

    Demo: https://codeply.com/go/lobGxGgfZE

    Also see: this answer, this answer or changing the button color in (CSS or SASS)

    It's also possible to change the primary color with CSS only but it requires a lot of additional CSS since there are many -primary variations (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary, etc...) and some of these classes have slight colors variations on borders, hover, and active states. Therefore, if you must use CSS it's better to use target one component such as changing the primary button color.