Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – How to overrite Bootstrap variable –bs-heading-color

Using Bootstrap theme in wordpress called BScore and css compiled by scss I have a file called:

_bscore_variables.scss which allows me to override the bootstrap theme variables.

So for example I set the color variables:

$gray-100:                        #f8f9fa;
$gray-200:                        #e9ecef;
$gray-300:                        #dee2e6;
$gray-400:                        #ced4da;
$gray-500:                        #adb5bd;
$gray-600:                        #6c757d;
$gray-700:                        #495057;
$gray-800:                        #343a40;
$gray-900:                        #212529;
$black:                           #000;

Then I can override the primary secondary etc variables like this in the same file:

$primary:                         $red;
$secondary:                       $gray-600;
$success:                         $green;

However the headings of the theme I am using are taking their color from a variable called --bs-heading-color and when I try to add an override in the file as

$heading-color: $grey-800 I get an error message saying there was a problem compiling the scss

If I change that line to something like:
$heading-color: grey I don’t get any compilation error but I don’t see the color taking effect in the browser. If I inspect the element I see the original color setting for the element as h2 { color: var(--bs-heading-color);}

Can anyone advise how to overide this variable?

The documentation on bootstrap colors doesn’t make any mention of that particular variable or where it comes from.

https://getbootstrap.com/docs/5.3/utilities/colors/#sass-variables

Tags:

2

Answers


  1. 0

    It’s possible.

    You have to override $headings-color not $heading-color.

    Good luck!

    Login or Signup to reply.
  2. 0

    Check out the customize section of the docs: https://getbootstrap.com/docs/5.3/customize/css-variables/

    It tells you how variables in bootstrap work.

    In the case of root variables which start with — (like –bs-heading-color) they’re defined in the _root.scss file, so you need to check this file to know how they’re defined.

    In this file you can see

    --#{$prefix}heading-color: #{$headings-color};

    So this is why you need to change $headings-color

    Hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search