Available text color classes in Bootstrap

Question

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

User · Accepted Answer

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.

User · Answer

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

User · Answer

You can use text classes    text-primary  text-secondary  text-success  text-danger  text-warning  text-info  text-light  text-dark  text-muted  text-white   use text classes in any tag where needed    lt p class  text-primary  gt  text-primary lt  p gt   lt p class  text-secondary  gt  text-secondary lt  p gt   lt p class  text-success  gt  text-success lt  p gt   lt p class  text-danger  gt  text-danger lt  p gt   lt p class  text-warning  gt  text-warning lt  p gt   lt p class  text-info  gt  text-info lt  p gt   lt p class  text-light bg-dark  gt  text-light lt  p gt   lt p class  text-dark  gt  text-dark lt  p gt   lt p class  text-muted  gt  text-muted lt  p gt   lt p class  text-white bg-dark  gt  text-white lt  p gt    You can add your own classes or modify above classes as your requirement

User · Answer

There are few more classess in Bootstrap 4  added in recent versions  not mentioned in other answers    text-black-50 and  text-white-50 are 50  transparent    x000D   x000D   text-body   x000D    color   212529  important  x000D    x000D   x000D   text-black-50   x000D    color  rgba 0  0  0  0 5   important  x000D    x000D   x000D   text-white-50   x000D    color  rgba 255  255  255  0 5   important  x000D    x000D   x000D    DEMO   x000D  p padding  5rem  x000D   lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  gt  x000D   x000D   lt p class  text-body  gt  text-body lt  p gt  x000D   lt p class  text-black-50  gt  text-black-50 lt  p gt  x000D   lt p class  text-white-50 bg-dark  gt  text-white-50 lt  p gt  x000D   x000D   x000D

[css] Available text color classes in Bootstrap

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to bootstrap-4