Overriding Default Bootstrap 4 Colours

[mrmbarnes]

Hi All

I am using the CDN links to Bootstrap 4 and need to override some of the default colours… for example I am using the info colour all over the site and need to make it a slightly different colour and need to change all the danger red to a more pink colour.

I have been researching this and what I have found is not working… I have also found info about editing the Bootstrap SCSS file however I have never worked with anything to do with SCSS and am using the CDN so can’t.

Plus I never think it is a good idea to edit base code like that.

Ideally I just want to add some code to my .css file.

Any help would be great.

mrmbarnes

[benanamen]

Include your CSS file AFTER the bootstrap CSS. Classes with the same name will override bootstrap.

[mrmbarnes]

Thank but I have tried that… my .css is the last file so anything in it will override everything else… I also have added the code directly to the header.php file I have that is on every page in case there was a cache issue so I can see the css code in the source code.

I have tried:
:root {
–info: #009CA6;
–danger: #C6007E;
}

I have also tried:

.info { color:#009CA6; }
.danger { color:#C6007E; }

Both with no luck.

I am sure this is quite easy but I am having difficulties finding the answer.

Any further help would be great.

mrmbarnes

[Mittineague]

@benanamen

AFTER the bootstrap CSS. Classes with the same name will override bootstrap

… as long as the specificity is equal or greater than the specificity of the bootstrap CSS?

[mrmbarnes]

Can anyone give me a working example?

[Mittineague]

What do you see in the browsers developer tools “inspect element” CSS pane?

[mrmbarnes]

Inspecting an element will not give me the info I need… I need to change the very base colour in Boostrap 4 that is then passed to the elements that you inspect… for example if you inspect a btn-info the colour is #17a2b8 if I add code for just btn-info then only the buttons will change colour… I need to change the info colour that will then pull everywhere else.

[ronpat]

@mrmbarnes

my .css is the last file so anything in it will override everything else…

Which is where is should be , but not because it will override everything else… it doesn’t!
Specificity matters!

@mrmbarnes

Can anyone give me a working example?

I doubt that you need someone to give you the answer, which we cannot without a link to your page anyway. Just read and follow the law of specificity… you’ll be a star.

Specifics on CSS Specificity | CSS-Tricks

[PaulOB]

@mrmbarnes

I need to change the very base colour in Boostrap 4 that is then passed to the elements that you inspect

The CDN files are Sass files I believe which are compiled so you can’t change the :root styles as they have all been converted to into css hex colours and not css variables.

To change colours when using the CDN you would have to do something like:

:root{
      /*--info: #17a2b8; original*/
      --info: #f00;
}
.btn-info{background-color:var(--info)}

Of course that is no help as you would have to do that for all the elements that would have used --info as a color.

To change everything site wide you would need your own local code version set up to use Sass etc and then you could change the variables before they are compiled to css. This is one of the reasons that bootstrap is unfriendly to beginners because just setting up a local system to use sass and compile etc is no straight forward job for a non programmer.

If you want to continue to use the CDN you will just have to over-ride the defaults as shown above for all the elements you use.