Add Colored Text and Background Classes in Bootstrap
Tags: bootstrap, scss, webdev, ui
Published: 2020-04-12 18:17:13

---
title: Add Colored Text and Background Classes in Bootstrap
published: true
description: Bootstrap provides contextual classes, let's see how we can add more classes in the same manner.
tags: bootstrap, scss, webdev, ui
series: Customizing Bootstrap
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ztobw300lfinw6qk4a79.png
canonical_url: https://blog.shhdharmen.me/add-colored-text-and-background-classes-in-bootstrap-cken27jhd002oefs132jheze8
---

<small><i>This article was originally published on [blog.shhdharmen.me](https://blog.shhdharmen.me/add-colored-text-and-background-classes-in-bootstrap-cken27jhd002oefs132jheze8)</i></small>

*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.

{% post https://dev.to/shhdharmen/responsive-size-classes-in-bootstrap-3ojl %}

---

## Background

Bootstrap already provides [contextual color classes](https://getbootstrap.com/docs/4.4/utilities/colors/), 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](https://dev-to-uploads.s3.amazonaws.com/i/b8jykspn5efi0etgtdku.jpg)

This is going to be very simple in short.

Start quickly with my github repo: bootstrap-theme-kit. Just follow the initial [guide](https://github.com/shhdharmen/bootstrap-theme-kit#-getting-started) and continue below.

{% github shhdharmen/bootstrap-theme-kit %}

We already have file called *_colors.scss* in *utilities* folder. Let's use that.

Add below code in it:

```scss
// 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`](https://sass-lang.com/documentation/at-rules/use) rule, it's easier to achieve such thing. Let's make some changes in *src\styles\main.scss*:

```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](https://sass-lang.com/documentation/at-rules/use#configuring-modules)
2. Then, we [loaded member](https://sass-lang.com/documentation/at-rules/use#loading-members), 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](https://dev-to-uploads.s3.amazonaws.com/i/k0ntd70sdxxjvvixv4rx.jpg)

#### Credits
<small>Let's get started image: Photo by <a href="https://unsplash.com/@diskander?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">David Iskander</a> on <a href="/s/photos/get-started?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
Man sitting on mountain: Photo by <a href="https://unsplash.com/@ianstauffer?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Ian Stauffer</a> on <a href="/s/photos/celebration?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
</small>