How to change navigation bar color in bootstrap

How to change the color of the navigation bar in bootstrap: 1. Change the navigation background color, set it to black, and set the background color of the nav tag to black; 2. Change the color of the navigation selected column, change the class name active to newactive, and Set its background color to red.

The operating environment of this article: Windows 7 system, bootstrapv4.4.1 version, Dell G3 computer.

How to change the color of the navigation bar with bootstrap:

1. The navigation bar HTML page made by bootstrap must be loaded bootstrap.min.css,bootstrap.min.js can achieve the navigation effect. The picture below is the complete code and renderings.

#2. Change the navigation background color and set it to black. Set the background color of the nav tag to black, and the code is background:#000. Below is the code and renderings.

#3. Change the color of the navigation selected column, for example, set the background of "Home Page" to red. Change the class name active to newactive and set its background color to red.

#4. Change the color of the secondary column under "Menu" when the mouse is placed on it. Set the hover attribute of the a tag under the class name dropdown-menu, and set the color to black.

#5. Change the color of the secondary column when clicking "Menu". The CSS code is .navbar-default .navbar-nav>.open>a:focus {color: black;background-color: red;}, which sets the color of the focus attribute of the a tag below this class.

#6. Change the color of the default text in the navigation bar. Set the text color of the a tag under the class name navbar-default to white, and the code is .navbar-default .navbar-nav>li>a {color: #fff;}.

Recommended: bootstrap video tutorial

The above is the detailed content of How to change navigation bar color in bootstrap. For more information, please follow other related articles on the PHP Chinese website!