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 related to
css
twitter-bootstrap
twitter-bootstrap-3
bootstrap-4
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.
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.
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 {_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_
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">_x000D_
_x000D_
<p class="text-body">.text-body</p>_x000D_
<p class="text-black-50">.text-black-50</p>_x000D_
<p class="text-white-50 bg-dark">.text-white-50</p>
_x000D_
Source: Stackoverflow.com