Change background of the navbar


I have a bootstrap navbar (download the CDN to set all the changes on the page with bootstrap). The problem is that I can not change the background of this, no matter how much I get into their classes and use! Important, I checked with the elements in the DOM and nothing happens with the changes.

I attach the navbar code:

<nav class="back-nav navbar navbar-expand-lg navbar-light bg-light">


                    Home (current)                       We                       Services                       Articles                       Contact                      

I attach the css code:

.navbar {
background: red !important;



It should be noted that I have also tried to take the classes that the element inspector tells me (bg-light) and also do not change the background.

asked by ricardo leiva sikic 02.09.2018 в 20:39

3 answers


This is due to the specificity of CSS, which is to determine which styles will have priority for the browser. If you declare an element a background: network through a class, then background: red using an ID and finally using an online style <nav style="background:red"></nav> the browser will set a hierarchy as follows:




When a! important is declared, the browser ignores the specificity and establishes the style even if it is only in one class. That is the reason why although you declare a background in your styles and add an important one, the browser ignores it and establishes the bootstrap, because the navbar is assigned a class .bg-lght that takes precedence over other classes. In these cases it is recommended that you reference your style sheet after the bootstrap CDN: example:

<link rel="stylesheet" href="bootstrap">
<link rel="stylesheet" href="susEstilos">

Without forgetting that you must establish! important to your styles, because if the browser has two classes with! important, it will give priority to the last one.


background: red !important


background: red !important

Official documentation:


answered by 02.09.2018 в 21:05

Modify the navbar classes

<nav class="navbar navbar-light" style="background-color: red;">
    <!-- Navbar content -->

Bootstrap documentation

answered by 03.09.2018 в 00:54

Delete the Bg-LIGHT and write a class you want, such as class="bg-personal"

Then in EL css

  background-image: url (Aqui va la url de tu imagen)
answered by 02.09.2018 в 20:47