Bootstrap provides contextual classes, let's see how we can add more classes in the same manner.
This is the series about customizing Bootstrap with it's scss variables
, mixins
and functions
. In previous article, we learned how to create responsive size classes.
Background
Bootstrap already provides contextual color classes, like bg-primary
, text-danger
, etc.
Let's see how we can add classes directly related with color name, like bg-blue
, text-yellow
, etc.
This is going to be very simple in short.
Start quickly with my github repo: bootstrap-theme-kit. Just follow the initial guide and continue below.
We already have file called _colors.scss in utilities folder. Let's use that.
Add below code in it:
// src\styles\utilities\_colors.scss
$colors: () !default;
@each $color in map-keys($colors) {
.text-#{$color} {
color: $color !important;
}
.bg-#{$color} {
background-color: $color !important;
}
}
Now, we need to make some change in src\styles\main.scss, so that we can use Bootstrap's $colors
list in utilities_colors.scss.
As we are using @use
rule, it's easier to achieve such thing. Let's make some changes in src\styles\main.scss:
// src\styles\main.scss
...
// 5. Utilities
@use "utilities" with (
$colors: vendors.$colors
);
...
A quick description of what's happening over here:
- We created _colors.scss a configurable module
- Then, we loaded member, in this case
$colors
, of Bootstrap usingvendors.$colors
- And we configured _colors.scss using
with ( <variable>: <value>, <variable>: <value> )
pattern
That's it!!! Now you can use all the color classes for items defined in $colors
list. Let me know your thoughts and feedback in the comment section.
Credits
Let's get started image: Photo by David Iskander on Unsplash
Man sitting on mountain: Photo by Ian Stauffer on Unsplash