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 · 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

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

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

User · Answer

The bootstrap 3 documentation lists this under helper classes  Muted  Primary  Success  Info  Warning  Danger  The bootstrap 4 documentation lists this under utilities - gt  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   lt p class  quot text-primary quot  gt This text is the primary color  lt  p gt   This is not a huge number of choices  but it s some

[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