Available text color classes in Bootstrap


I'm developing a sign up page, by putting some text as the title at the navigation bar. I want to give those texts different colors. For this purpose I'm using a separate CSS file, but I want to do this using bootstrap's CSS file.

Can anybody list the available color classes in bootstrap?

This question is tagged with css twitter-bootstrap twitter-bootstrap-3 bootstrap-4

~ Asked on 2014-02-01 07:08:02

The Best Answer is


The bootstrap 3 documentation lists this under helper classes: Muted, Primary, Success, Info, Warning, Danger.

The bootstrap 4 documentation lists this under utilities -> color, and has more options: primary, secondary, success, danger, warning, info, light, dark, muted, white.

To access them one uses the class text-[class-name]

So, if I want the primary text color for example I would do something like this:

<p class="text-primary">This text is the primary color.</p>

This is not a huge number of choices, but it's some.

~ Answered on 2014-07-22 19:55:23


The text at the navigation bar is normally colored by using one of the two following css classes in the bootstrap.css file.

Firstly, in case of using a default navigation bar (the gray one), the .navbar-default class will be used and the text is colored as dark gray.

.navbar-default .navbar-text {
  color: #777;

The other is in case of using an inverse navigation bar (the black one), the text is colored as gray60.

.navbar-inverse .navbar-text {
  color: #999;

So, you can change its color as you wish. However, I would recommend you to use a separate css file to change it.

NOTE: you could also use the customizer provided by Twitter Bootstrap, in the Navbar section.

~ Answered on 2014-02-01 13:46:33

Most Viewed Questions: