Hit enter after type your search item

The Bootstrap color classes for different elements

In this tutorial, I am going to show you examples of built-in Bootstrap color classes for various elements. The Bootstrap has specific classes for coloring the text, links, buttons etc.

text example background links navbar

Generally, the class names use the context that may reflect the purpose of the text or some other element. For example, as using the red colored text or button, the class name contains the word “–danger” reflecting some dangerous or critical information or action. Similarly, -warning is the orange color for the context where you are alarming a visitor for certain action.

In the same way, Bootstrap 4 has the standard pattern for using class names e.g. –success, -primary, -secondary, -light, -dark, -warning etc.

These names are preceded by element’s names or shortcodes. For example, text- for text, btn- for buttons, bg- for backgrounds.

In the last section, you can also see an example of setting navbar colors.

Bootstrap 4 classes for coloring text

First, have a look at the example of all built-in classes for coloring the simple text in Bootstrap 4.

Bootstrap color text

See online demo and code

The markup for coloring text:

The following classes for coloring the text are available:
  • text-dark /*Blackish*/
  • text-white
  • text-light
  • text-primary /*The standard blue color*/
  • text-secondary /*Grayish color*/
  • text-warning /*Orange color*/
  • text-success /* Green Color */
  • text-danger /*Red color*/
  • text-info /*Light blue color*/
  • text-muted

Using background color contextual classes example

Similarly, you may use the background color standard classes for setting the background of various elements.

The following example shows using the contextual background color classes in paragraphs, div and different headings (h1-h6) elements. Along with background color, the contextual text color classes are also used.

Bootstrap background color

See online demo and code

The markup:

Bootstrap 4 color classes for buttons

Until now, you can see the pattern of coloring in Bootstrap. We have seen, the text can be colored by using contextual names by using text-[context class]. Similarly, replace the “text” by “bg” for setting the background colors.

The buttons can also be colored in the same way in Bootstrap. Just replace the “text” or “bg” in above classes by “btn” and the same standard colors will be applied to buttons.

The following button classes are available in Bootstrap version 4:

  • btn-primary
  • btn-secondary
  • btn-success
  • btn-info
  • btn-light
  • btn-dark
  • btn-danger
  • btn-warning

See a demo online by clicking the link below for normal sized buttons:

See online demo and code

Learn more about the Bootstrap 4 buttons with 15 examples.

Coloring the list items example

Just like the text, backgrounds, and buttons standard built-in classes, the pattern that can be used for coloring the list items is similar.

Use the contextual Bootstrap 4 classes for creating lists with colors as follows:

  • list-group-item-primary
  • list-group-item-danger
  • list-group-item-success
  • list-group-item-info
  • list-group-item-secondary
  • list-group-item-warning
  • list-group-item-dark
  • list-group-item-light

See the example of using these classes:

See online demo and code

You can see the detailed tutorial of Bootstrap list here: Bootstrap 4 lists

Coloring the links example

If you want to color the links by using Bootstrap classes then simply assign the contextual text classes to the <a> tags. For example:

<a href=”https://www.jquery-az.com/” class=”text-primary”>Blue color link</a>

See an example where I used all available text classes for creating links with colors:

Bootstrap link colors

See online demo and code

The markup:

You can see, in a few links the background color classes are also used.

Using text and background colors in Bootstrap 4 table example

Though, Bootstrap 4 has built-in contextual classes for coloring the table headers (thead-dark or thead-light) and table rows by using contextual classes etc.

You may also use the background and text color classes in the table as well. In the following example, the background color is set at the table level that applies to the whole table. The color of the text is also set by using text contextual class.

Besides, the table header is given a separate background and text color. Have a look:

Bootstrap table colors

See online demo and code

The markup:

For learning more about the table’s contextual classes and other features, visit the Bootstrap 4 tables tutorial.

Setting the background of navbar example

You may use the background color classes for setting the background of navbar in Bootstrap 4. For that, simply use the background class in the <nav> tag containing your navigation bar. For example:

<nav class=”navbar navbar-expand-lg navbar-light bg-warning”>

Have a look at this demo online navbars:

Bootstrap navbar color

See online demo and code

Just copy/paste the code into your editor to see the full view of navbars.

This div height required for enabling the sticky sidebar