How to change the bootstrap primary color?

Question

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.

Possible duplicate of [How to change btn color in Bootstrap](http://stackoverflow.com/questions/28261287/how-to-change-btn-color-in-bootstrap) — TylerH, Aug 05 '16 at 14:47
Yes, just override it in your custom CSS file, but you'll need to apply many different rules for each of the elements, and their states (active, hover, focus etc) — Lee, Aug 05 '16 at 14:48
Instead of overriding the CSS, I recommend using the customizing tool http://getbootstrap.com/customize/ — blurfus, Aug 05 '16 at 14:49

Carol Skelly · Accepted Answer · 2023-06-01T19:27:53.110

209

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.

edited Jun 01 '23 at 19:27

answered May 09 '18 at 12:41

Carol Skelly

351,302
90
710
624

2

@Chris Why? Bootstrap's npm build scripts are included with the source. Look in the package.json file for a complete list. – John E Feb 17 '19 at 21:18
1

So using a CDN requires the CSS only change (*long -primary version*) I suspect? – Erik Philips Apr 22 '19 at 22:38
4

For those of us who are SASS ignorant, where are setting the $primary value and issuing the import "bootstrap";? – Steven Frank Jan 21 '20 at 23:58
1

Use `@import '~bootstrap/scss/_functions';` instead – Abraham May 23 '21 at 21:08
1

In many cases, using Laravel, BS5 configuration file is named as ...\resources\sass\app.scss – Marcello Marino Jan 11 '22 at 15:52
How can I set them before the import but equal to CSS variables? Or is this simply impossible since the bootstrap functions won't be able to know the value? – maxshuty May 12 '22 at 16:52
Thanks for the update for Bootstrap 5.3! Needed to adapt the imports like this to make it work: ````@import "../../node_modules/bootstrap/scss/functions";```` – MikhailRatner May 02 '23 at 11:45
in Bootstrap 5.3, why does text color is dark with some primary color. Like teal, orange etc... when I have override "teal" color as primary. so, It does dark text instead of white in btn-primary. – HDP May 21 '23 at 11:41
@HDP BS5 uses the WCAG 2.0 algorithm... read more here: https://stackoverflow.com/questions/68298372/customize-bootstrap-5-text-color-contrast-in-button/68303393#68303393 – Carol Skelly May 22 '23 at 12:53

score 43 · Answer 2 · edited Oct 03 '19 at 03:03

43

I've created this tool: https://lingtalfi.com/bootstrap4-color-generator, you simply put primary in the first field, then choose your color, and click generate.

Then copy the generated scss or css code, and paste it in a file named my-colors.scss or my-colors.css (or whatever name you want).

Once you compile the scss into css, you can include that css file AFTER the bootstrap CSS and you'll be good to go.

The whole process takes about 10 seconds if you get the gist of it, provided that the my-colors.scss file is already created and included in your head tag.

Note: this tool can be used to override bootstrap's default colors (primary, secondary, danger, ...), but you can also create custom colors if you want (blue, green, ternary, ...).

Note2: this tool was made to work with bootstrap 4 (i.e. not any subsequent version for now).

edited Oct 03 '19 at 03:03

Brad Turek

2,472
3
30
56

answered May 31 '19 at 22:40

ling

9,545
4
52
49

I had to move the boostrap import after this generated CSS to make it work. Great tool thanks. – deanwilliammills Nov 21 '19 at 17:54
3

Seems to work in Bootstrap 5 as well - at least for me... – Mayinx May 19 '21 at 23:21
Impressive! Anyone else know if it still works with Bootstrap 5.1? – MikhailRatner Oct 19 '21 at 10:03
I just used this and it works brilliantly (even though I had no idea what scss was before all this)! Great work and thanks for sharing. I'm also using PyCharm and the intelligent look up displays the newly configured colour pallette perfectly. It's a great method for building localized colouring inside your app. – Carewen Jan 31 '22 at 19:48
1

This tool is sooooo greeeeaaattttttt!!! Thanks – ImportError Jul 15 '22 at 20:08
The tool doesn't change the button's focus state. – tomasantunes Nov 05 '22 at 11:44
Could be something I'm doing, but not working for BS 5.3 – James Poulose Jul 05 '23 at 02:14

score 33 · Answer 3 · edited May 06 '21 at 06:15

There are two ways you can go to

http://getbootstrap.com/customize/

And change the color in this adjustments and download the bootstrap customized.

Or you can use sass with this version https://github.com/twbs/bootstrap-sass and import in your sass assets/stylesheets/_bootstrap.scss but before import this you can change the defaults variable colors

//== Colors
//
//## Gray and brand colors for use across Bootstrap.

$gray-base:              #000 !default;
$gray-darker:            lighten($gray-base, 13.5%) !default; // #222
$gray-dark:              lighten($gray-base, 20%) !default;   // #333
$gray:                   lighten($gray-base, 33.5%) !default; // #555
$gray-light:             lighten($gray-base, 46.7%) !default; // #777
$gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee

$brand-primary:         darken(#428bca, 6.5%) !default; // #337ab7
$brand-success:         #5cb85c !default;
$brand-info:            #5bc0de !default;
$brand-warning:         #f0ad4e !default;
$brand-danger:          #d9534f !default;


//== Scaffolding
//
//## Settings for some of the most global styles.

//** Background color for `<body>`.
$body-bg:               #fff !default;
//** Global text color on `<body>`.
$text-color:            $gray-dark !default;

//** Global textual link color.
$link-color:            $brand-primary !default;
//** Link hover color set via `darken()` function.
$link-hover-color:      darken($link-color, 15%) !default;
//** Link hover decoration.
$link-hover-decoration: underline !default;

And compile the result

You [should omit](https://getbootstrap.com/docs/4.3/getting-started/theming/#variable-defaults) the `!default` flags unless there are other custom style files that give you a reason not to. — John E, Feb 17 '19 at 21:26

score 13 · Answer 4 · answered Jul 02 '20 at 13:34

Bootstrap 5

For bootstrap 5 you can just go to you main scss file and add:

$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;

or whatever changes you wanna make...

And don't forget to import bootstrap right after.

Your final main.scss file should look like this:

$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;


@import "~node_modules/bootstrap/scss/bootstrap";

score 7 · Answer 5 · edited Apr 05 '21 at 17:27

Any element with 'primary' tag has the color @brand-primary. One of the options to change it is adding a customized css file like below:

.my-primary{
  color: lightYellow ;
  background-color: red;
}

.my-primary:focus, .my-primary:hover{
  color: yellow ;
  background-color: darkRed;
}

a.navbar-brand {
  color: lightYellow ;
}

.navbar-brand:hover{
  color: yellow;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <br>
  <nav class="navbar navbar-dark bg-primary mb-3">
    <div class="container">
      <a class="navbar-brand" href="/">Default (navbar-dark  bg-primary)</a>
    </div>
  </nav>
  <button type="button" class="btn btn-primary">Default (btn btn-primary)</button>
  </div>


<br>

<div class="container">
  <nav class="navbar my-primary mb-3">
    <div class="container">
      <a class="navbar-brand" href="/">Customized (my-primary)</a>
    </div>
  </nav>
  <button type="button" class="btn my-primary">Customized (btn my-primary)</button>
  </div>

For more about customized css files with bootstrap, here is a helpful link: https://bootstrapbay.com/blog/bootstrap-button-styles/ .

Rauland · Answer 6 · 2019-10-06T17:51:45.537

7

Bootstrap 4

This is what worked for me:

I created my own _custom_theme.scss file with content similar to:

/* To simplify I'm only changing the primary color */
$theme-colors: ( "primary":#ffd800);

Added it to the top of the file bootstrap.scss and recompiled (In my case I had it in a folder called !scss)

@import "../../../!scss/_custom_theme.scss";
@import "functions";
@import "variables";
@import "mixins";

edited Oct 06 '19 at 17:51

answered Oct 06 '19 at 17:32

Rauland

2,944
5
34
44

2

This is the correct approach, as stated in https://getbootstrap.com/docs/4.0/getting-started/theming/ – Gianpiero Dec 10 '19 at 16:15
@rauland How do you recompile? Is this same approach followed in case of bootstrap 3? – Umair Jun 07 '20 at 19:53
1

Hi @Umair , I use Visual Studio with the extension Web Compiler by Mads Kristensen. It adds a compilerconfig.json to my solution where I define how to compile each .scss file, specifying the input .scss and the output .css file. More info: https://github.com/madskristensen/WebCompiler – Rauland Jun 22 '20 at 15:49
1

e.g: (asp.net on .Net core) "inputFile": "wwwroot\\lib\\bootstrap\\scss\\bootstrap.scss", "outputFile": "wwwroot\\lib\\bootstrap\\dist\\css\\bootstrap.css" – Rauland Jun 22 '20 at 15:50

score 6 · Answer 7 · answered Aug 06 '19 at 20:27

6

This might be a little bit old question, but I want to share the best way I found to customize bootstrap. There's an online tool called bootstrap.build https://bootstrap.build/app. It works great and no installation or building tools setup required!

answered Aug 06 '19 at 20:27

Rami Alloush

2,308
2
27
33

Are there any video tutorials available for this site? Just to understand how to operate the site. – Corné May 02 '22 at 23:49
It's very simple, just change variables on the right and export the new theme. This video is old but might help https://www.youtube.com/watch?v=Sg-DidmHHFU – Rami Alloush May 04 '22 at 04:21

Alvin Konda · Answer 8 · 2019-07-01T10:57:51.977

The correct way to change the default primary colour in Bootstrap 4.x using SASS, or any other colours like secondary, success and so on.

Create the following SASS file and import Bootstrap SASS as indicated:

// (Required) Import Bootstrap
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

$primary: blue;
$secondary: green;
$my-color: red;

$theme-colors: (
  primary: $primary,
  secondary: $secondary,
  my-color: $my-color
);

// Add below your SASS or CSS code

// (Required) Import Bootstrap
@import "bootstrap/bootstrap";

score 2 · Answer 9 · answered Jan 02 '17 at 08:11

Using SaSS
change the brand color

$brand-primary:#some-color;

this will change the primary color accross all UI.

Using css-
suppose you want to change button primary color.So

btn.primary{
  background:#some-color;
}

search the element and add a new css/sass rule in a new file and attach it after u load the bootstrap css.

score 0 · Answer 10 · answered Dec 10 '19 at 16:45

Bootstrap 4 rules

Most of the answers here are more or less correct, but all of them with some issues (for me). So, finally, googleing I found the correct procedure, as stated in the dedicated bootstrap doc: https://getbootstrap.com/docs/4.0/getting-started/theming/.

Let's assume bootstrap is installed in node_modules/bootstrap.

A. Create your your_bootstrap.scss file:

@import "your_variables_theme";    // here your variables

// mandatory imports from bootstrap src
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables"; // here bootstrap variables
@import "../node_modules/bootstrap/scss/mixins";

// optional imports from bootstrap (do not import 'bootstrap.scss'!)
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
etc...

B. In the same folder, create the _your_variables_theme.scss file.

C. Customize the bootstrap variables in _your_variables_theme.scss file following this rules:

Copy and paste variables from _variables.scss as needed, modify their values, and remove the !default flag. If a variable has already been assigned, then it won’t be re-assigned by the default values in Bootstrap.

Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap’s Sass files.

Default variables are available in node_modules/bootstrap/scss/variables.scss.

score 0 · Answer 11 · answered Dec 04 '20 at 17:51

This seem to work for me in Bootstrap v5 alpha 3

_variables-overrides.scss

$primary: #00adef;

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

main.scss

// Overrides
@import "variables-overrides";

// Required - Configuration
@import "@/node_modules/bootstrap/scss/functions";
@import "@/node_modules/bootstrap/scss/variables";
@import "@/node_modules/bootstrap/scss/mixins";
@import "@/node_modules/bootstrap/scss/utilities";

// Optional - Layout & components
@import "@/node_modules/bootstrap/scss/root";
@import "@/node_modules/bootstrap/scss/reboot";
@import "@/node_modules/bootstrap/scss/type";
@import "@/node_modules/bootstrap/scss/images";
@import "@/node_modules/bootstrap/scss/containers";
@import "@/node_modules/bootstrap/scss/grid";
@import "@/node_modules/bootstrap/scss/tables";
@import "@/node_modules/bootstrap/scss/forms";
@import "@/node_modules/bootstrap/scss/buttons";
@import "@/node_modules/bootstrap/scss/transitions";
@import "@/node_modules/bootstrap/scss/dropdown";
@import "@/node_modules/bootstrap/scss/button-group";
@import "@/node_modules/bootstrap/scss/nav";
@import "@/node_modules/bootstrap/scss/navbar";
@import "@/node_modules/bootstrap/scss/card";
@import "@/node_modules/bootstrap/scss/accordion";
@import "@/node_modules/bootstrap/scss/breadcrumb";
@import "@/node_modules/bootstrap/scss/pagination";
@import "@/node_modules/bootstrap/scss/badge";
@import "@/node_modules/bootstrap/scss/alert";
@import "@/node_modules/bootstrap/scss/progress";
@import "@/node_modules/bootstrap/scss/list-group";
@import "@/node_modules/bootstrap/scss/close";
@import "@/node_modules/bootstrap/scss/toasts";
@import "@/node_modules/bootstrap/scss/modal";
@import "@/node_modules/bootstrap/scss/tooltip";
@import "@/node_modules/bootstrap/scss/popover";
@import "@/node_modules/bootstrap/scss/carousel";
@import "@/node_modules/bootstrap/scss/spinners";

// Helpers
@import "@/node_modules/bootstrap/scss/helpers";

// Utilities
@import "@/node_modules/bootstrap/scss/utilities/api";

@import "custom";

score 0 · Answer 12 · answered May 14 '22 at 06:41

Bootstrap 5.2. update

If you are working with SCSS and you would like to modify colors you should add maps to your SCSS file.

@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/maps"; // MAPS FILE - SINCE 5.2

and then:

$custom-colors: (
        "white": $white, // your colours
);
$theme-colors: map-merge($theme-colors, $custom-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

and finally:

@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/utilities";

and the rest.

Alex01 · Answer 13 · 2018-03-13T19:25:05.893

-3

Since Bootstrap 4 you can easily change the primary color of your Bootstrap by downloading a simple CSS file on BootstrapColor.net. You don't need to know SASS and the CSS file is ready to use for your website. You can choose the color you want like blue, indigo, purple, pink, red, orange, yellow, green, teal or cyan color.

edited Mar 13 '18 at 19:25

answered Mar 12 '18 at 17:48

Alex01

330
3
14

2

Those are literally the only colors you can choose, as bootstrapcolor.net has simply recompiled bootstrap with a new primary color hardcoded in. – Quantum7 Mar 13 '18 at 21:31
1

Super easy solution! – massimoi Dec 11 '20 at 10:18

score -8 · Answer 14 · answered Aug 03 '18 at 11:24

-8

You cannot change the color in cdn file.
Download the bootstrap file.
Search For bootstrap.css file.
open this(bootstrsap.css) file and search for 'primary'.
change it to the colour you desire.

answered Aug 03 '18 at 11:24

Sourav

11
2

1

This doesn't really work. It's not good practice to change the Bootstrap CSS directly. Instead add CSS overrides in a separate file that follows bootstrap.css. Also, changing *all* the the `-primary` color references to the same color would lose the intended variations on border, hover, active, etc.. colors since they're a variation of the primary background color. – Carol Skelly Sep 06 '18 at 11:01
@Zim yupp your solution seems more generalised thanks ! – Sourav Sep 26 '18 at 05:39

score -13 · Answer 15 · edited Jun 10 '18 at 16:12

-13

This is a very easy solution.

<h4 class="card-header bg-dark text-white text-center">Renew your Membership</h4>

replace the class bg-dark, with bg-custom.

In CSS

.bg-custom {
  background-color: red;
}

edited Jun 10 '18 at 16:12

DaFois

2,197
8
26
43

answered Jun 10 '18 at 14:48

Rob

1

3

This doesn't answer the question, read the question carefully. – Munim Munna Jun 10 '18 at 15:33

score -21 · Answer 16 · answered Aug 05 '16 at 14:46

-21

Yes, I'd suggest opening up the .css file, inspect the page and find the color code you want to change and Find All and Replace (depending on your text editor) to the color you want. Do that with all the colors you want to change

answered Aug 05 '16 at 14:46

Jonas Sideravičius

38
4

4

This is actually not a best practice. Sure it will work, but whenever you upgrade the framework, your changes will disappear (and you have to repeat the process *every. single. time* you do an upgrade) - Instead, use the customizer tool (http://getbootstrap.com/customize/) or add your custom changes to a separate .css file (overriding the classes you want to override) – blurfus Aug 05 '16 at 14:51

How to change the bootstrap primary color?

16 Answers16

Bootstrap 4 rules

Linked

Related