Bootstrap: setting custom colors

Question

I am using bootstrap 4.0.0 in a project. I know that bootstrap defines variables such as --primary to define the color of buttons (in this case .btn-primary). Instead, I would like to have my custom color. However, I didn't manage to set another "primary" color, even inserting the following snippet of code in the HTML files before or after the <link> tag for the bootstrap.css.

<style>
  :root {
     --primary: #009c68;
  }
</style>

score 2 · Answer 1 · edited May 31 '23 at 16:17

Bootstrap is originally written in SCSS and thus when it is compiled to CSS it actually does uses the color code and not the var(--primary) in the CSS,

The code in bootstrap css file is (THE SOURCE IS GIT REPO OF BOOTSTRAP) :

.btn-primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

And Not

.btn-primary {
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary);
}

If you want to customize this option you will have to download the files rather than the CDN and edit the SCSS and compile it.

I hope I could help.

score 2 · Accepted Answer · answered Jan 02 '20 at 18:43

You can overwrite bootstrap styles by adding "!important;" For example in your html you might have something like this:

<button type="button" class="btn btn-primary">Primary</button>

You can change the color like this:

<button type="button" class="btn" style="background-color: #009c68!important;">Primary</button>

In CSS, the !important means that “this is important”, ignore all the subsequent rules, and apply !important rule. For more information you can go here.

If this answer does not work with your given situation, I would suggest looking into Bootstrap Theming. Documentation explaining how to customize Bootstrap 4 and modify existing colors can be found here.

I created a class with that color, that I add to the buttons btn-primary... — JDias, Jan 03 '20 at 12:17

score 2 · Answer 3 · answered Jan 03 '20 at 11:48

Think of the :root CSS variables like --primary as "read-only". They can be referenced like..

background-color: var(--primary)

But, trying to change the original value of --primary will do nothing:

:root {
     --primary: #009c68;
}

This has no effect because Bootstrap's CSS is compiled from SASS variables.

To change/override the color of btn-primary you should see these questions:
How to change the bootstrap primary color?
How to change btn color in Bootstrap

Bootstrap: setting custom colors

3 Answers3

The code in bootstrap css file is (THE SOURCE IS GIT REPO OF BOOTSTRAP) :

And Not

Linked

Related