How to reference bootstrap colors as a variable in css?

Try cloning Bootstrap from GIT: https://github.com/twbs/bootstrap/, and then edit chosen .scss files with variables (_variabes.scss probably).

You can also check more options here: Where to find the twitter bootstrap less files?

Version [email protected] comes with many SASS maps as in

$grays: () !default;

$grays: map-merge((
    "100": $gray-100,
    "200": $gray-200,
    "300": $gray-300,
    "400": $gray-400,
    "500": $gray-500,
    "600": $gray-600,
    "700": $gray-700,
    "800": $gray-800,
    "900": $gray-900
), $grays);

For those who don't know how to use a SASS map please use

body {
    padding-top: 5rem;
    background: map-get($grays, "200")
}

And you will have access a nice range of standardised colours.

Ah! Please don't forget to import the _variables file as in

@import "~bootstrap/scss/_variables.scss";

:)

Bootstrap 4 defines CSS variables for theme colors that can be used in supporting browsers without compiling from SCSS: https://getbootstrap.com/docs/4.3/getting-started/theming/#css-variables

.my-warning {
    background-color: var(--warning);
}

There are also utility classes for text and background colors: https://getbootstrap.com/docs/4.3/utilities/colors/

<div class="bg-warning">Warning</div>

CodePen example

It's impossible to do it using CSS only. You must use a CSS compressor such as SASS or LESS. Each application has an exclusive Bootstrap module and it can be launched using Bower or NPM.

After that you can call Bootstrap variables (check all the variables available in your_modules_path_here/bootstrap/_variables.scss), for example in SASS:

.your-custom-element {
    background: $alert-info-bg;
}

Extra:

If you are using SASS, I suggest you to import some Bootstrap modules, instead of all Bootstrap stack. I've usually use this same method and it works fine.

In your main.scss file, you must import all the dependencies and modules you want to use:

// some bootstrap modules
@import 'bootstrap/normalize';
@import 'bootstrap/variables';
@import 'bootstrap/mixins';
@import 'bootstrap/grid';
@import 'bootstrap/scaffolding';
@import 'bootstrap/responsive-utilities';
@import 'bootstrap/utilities';
@import 'bootstrap/modals';

@import 'bootstrap/forms';
@import 'bootstrap/input-groups';
@import 'bootstrap/tables';

After that, you should create your own _variables.scss file to overwrite bootstrap SASS variables you want and prepend @import 'variables' to the same main.scss file

The Bootstrap sass module is very "varialized" and all the variables has a !default instruction, ready to be overwrited.

For example, in your custom _variables.scss:

$default-font: "Lato", Verdana, Arial, sans-serif;

$link-color: #ef899e;
$body-bg: #f0f0f0;
$text-color: #666;

It will overwrite these variables and in the next SASS build, the output file will compile Bootstrap SASS module with your customizations.

To check all variables available in the Bootstrap module, you can see it in /node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss or bootstrap/_variables.scss (inside your module manager path, if your are not using npm)

https://www.npmjs.com/package/bootstrap-sass

Hope it helps!