How are Bootstrap styles generated using Sass

user_6935886 0
Viewed 61

I downloaded the npm bootstrap package, went into node_modules/bootstrap/dist/css/bootstrap.css, and looked at .alert-danger styles:

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

When I search those color codes, they do not appear in any other files. Where are these codes being defined/calculated? I’m interested in customizing those values using Sass, I’m trying to keep specificity overrides as my last resort.

bootstrap-4 sass
1 Answers

you can find the main colors in node_modules/bootstrap/scss/_variables.scss file, but the colors in the dist bootstrap.css file are not the same as the colors in _variables.scss,

bootstrap generates the dist colors from the main colors in _variables.scss:


lighten($table-dark-bg, 7.5%)

darken($link-color, 15%)

rgba($red, .1)
user_105645250
Related