Available text color classes in Bootstrap
CssTwitter BootstrapTwitter Bootstrap-3Bootstrap 4Css Problem Overview
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?
Css Solutions
Solution 1 - Css
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.
Solution 2 - Css
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.
Solution 3 - Css
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.
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
You can add your own classes or modify above classes as your requirement.
Solution 4 - Css
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.
.text-body {
color: #212529 !important;
}
.text-black-50 {
color: rgba(0, 0, 0, 0.5) !important;
}
.text-white-50 {
color: rgba(255, 255, 255, 0.5) !important;
}
/*DEMO*/
p{padding:.5rem}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<p class="text-body">.text-body</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>