Add Colored Text and Background Classes in Bootstrap

Subscribe to my newsletter and never miss my upcoming articles

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.

Let's get started

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:

  1. We created _colors.scss a configurable module
  2. Then, we loaded member, in this case $colors, of Bootstrap using vendors.$colors
  3. 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.

Well done

Credits

Let's get started image: Photo by David Iskander on Unsplash
Man sitting on mountain: Photo by Ian Stauffer on Unsplash

Comments (4)

Sandeep Panda's photo

Hey, interesting stuff :) Please start your code block like this in order to enable syntax highlighting for CSS:

```css
Show +1 replies
Dharmen Shah's photo

Can you help me with that?

I believe that you must be using Prismjs for code highlighting. For scss support, you will need to inject below script:

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/components/prism-scss.min.js" integrity="sha512-rAb9BrnkhMpxN7NoOM7WwPa3phfCMMUZw568Tyzlj9frNsdUUeltfCTATD6ccnVLtnERR+ZXS85Ybs7wo9IiTQ==" crossorigin="anonymous"></script>
Sandeep Panda's photo

Dharmen Shah We are using Highlight.js. I will pass this feedback to my team and come up with a solution soon.