How to reference bootstrap colors as a variable in css?

Question

I'm trying to customize my bootstrap theme a bit. I'd like to do something like this in my own css file:

div {
background-color: @brand-warning;//or @body-bg or @dark-gray, etc
}

That is, Bootstrap has a warning color variable, but I'd like to access it. Anyway to do this?

Thanks

Solution 1

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!

Solution 2

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

Solution 3

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";

:)

Solution 4

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?

View more solutions

Comments

[user798719]

Thank you this was helpful! I had a suspicion that doing this rather simple and I'm guessing common task, wasn't posssible without LESS or SASS.

[iGian]

Thank you. Super!