How to change the bootstrap navbar text color?

Changing the text color of the navigation bar is a common task when customizing Bootstrap. The default Bootstrap navbar text is black, but you may want to change it to fit your site’s color scheme. Luckily, there are a few simple ways to change the navbar text color in Bootstrap.

In this guide, we’ll cover the following methods to change navbar text color:

• Using Bootstrap navbar CSS classes
• Custom CSS
• Sass variables (for advanced customization)

We’ll also look at some examples to change the text color to common colors like white, blue, red, etc. Let’s get started!

Prerequisites

Before we modify the navbar text color, make sure you have the following:

• Bootstrap CSS included on your page
• A Bootstrap navbar markup on your page

Here is some sample HTML for a basic navbar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

This will give you a basic white navbar to start with. Now let’s go over the different ways to modify the text color.

Using Bootstrap Navbar CSS Classes

The easiest way to change the navbar text color is to use Bootstrap’s built-in navbar CSS classes. Bootstrap includes the following classes for modifying text color:

• navbar-light – For light background colors, use class navbar-light and set a dark text color like black or dark grey.
• navbar-dark – For dark background colors, use class navbar-dark and set a light text color like white or light grey.

To use these classes:

1. Add either navbar-light or navbar-dark to the .navbar div.
2. Set the color CSS property to your desired text color.

Here’s an example to change the text color to white:

<nav class="navbar navbar-dark bg-primary" style="color: white;">

And an example to change the color to black:

  
<nav class="navbar navbar-light bg-light" style="color: black;"> 

The navbar-light and navbar-dark classes automatically set background-color and border colors, so you only need to specify the text color.

This makes it easy to quickly change the navbar text color to common options like black, white, or grey.

Navbar Text Color Examples

Here are some examples using navbar-light and navbar-dark to change the text color:

<nav class="navbar navbar-dark bg-primary" style="color:white;">

  
<nav class="navbar navbar-light bg-light" style="color:black;">

<nav class="navbar navbar-light bg-light" style="color:#333;"> 

<nav class="navbar navbar-dark bg-dark" style="color:blue;">

This makes it easy to quickly customize the navbar text color. Next, let’s look at using custom CSS for more advanced modifications.

Custom CSS

For more advanced customization of the text color, you can use custom CSS. This allows you to set the color to any value.

To change the text color with CSS:

1. Add an ID or class to the .navbar div to target it.
2. Use CSS to set the color property.

For example:

<nav class="navbar" id="mynavbar">

<style>
  #mynavbar {
   color: hotpink;
  }
</style>  

You can use CSS color names, hex codes, rgb/rgba values, etc. Some examples:

#mynavbar {
  color: hotpink; /* color name */
}

#mynavbar {
  color: #6da552; /* hex code */ 
}

#mynavbar {
  color: rgb(100, 150, 200); /* rgb value */  
} 

This allows for finer grained control over the text color.

More Examples

Here are some more code examples for different text colors:

  
<nav class="navbar" id="mynavbar">

#mynavbar {
  color: red;
}

<nav class="navbar" id="mynavbar">  

  
#mynavbar {
  color: orange; 
}

<nav class="navbar" id="mynavbar">

#mynavbar {
  color: cyan;
} 

So you can use CSS to customize the color to any value. Next let’s look at how to modify at a Sass variable level.

Sass Variables

When using compiled Bootstrap Sass, you can modify colors through Sass variables. This allows you to change the navbar text color globally.

Bootstrap defines the following Sass variables for the navbar:

• $navbar-light-color – Text color for navbar-light
• $navbar-light-hover-color – Text color on hover for navbar-light
• $navbar-dark-color – Text color for navbar-dark
• $navbar-dark-hover-color – Text color on hover for navbar-dark

To change the text color, set the relevant variable to your desired color in your Sass file before importing Bootstrap:

// Light navbar
$navbar-light-color: purple; 

// Dark navbar
$navbar-dark-color: white;

@import "bootstrap"; 

This will make all navbar text that color by default.

More Sass Examples

 
$navbar-dark-color: blue;

$navbar-light-color: green;

  
$navbar-light-color: pink;

So Sass variables can be useful for global control over the navbar text colors.

Conclusion

To recap, there are a few different ways to modify the default text color of Bootstrap navbars:

• Use navbar CSS classes like navbar-light and navbar-dark
• Custom CSS targeting the .navbar element
• Sass variables for global control

The navbar classes are useful for quick changes to common colors like black, white or gray. For more advanced customization with any color, use custom CSS or Sass variables.

Here are some final examples:

  
<nav class="navbar navbar-dark bg-primary" style="color:white;">

<nav class="navbar" id="mynavbar"> 

#mynavbar {
  color: purple;
}

$navbar-light-color: orange;

I hope this guide has shown some helpful techniques for customizing the navbar text color in Bootstrap to fit your design needs! Let me know if you have any other questions.