Search code examples
cssnavbarbootstrap-5background-color

Bootstrap 5 background color body and navbar

I have this piece of html:

<nav class="navbar navbar-expand-lg navbar-dark bg-success ">
  <div class="container-fluid">
    <div class="d-flex justify-content-between w-100" style="white-space: nowrap;">
      <div>
        <span class="h3 text-warning">
          James Joyce
        </span>
      </div>

For some reason my body tag with bg-success is not shown in the piece of html. Don't know why so I just write it here.

Now bg-success is used twice. In the body it is a solid background color but in the navbar it becomes gradient which makes it not look very nice (I think). See screenshot. How do I refrain the navbar from using a gradient (success in this case).

enter image description here

I tried looking for turning of gradient but couldn't find it nowhere.

Solution

  • You can remove the background of the second div using this CSS code in line on the div in question:

     style="background:none;"

    You can also create a class if you plan on doing this elsewhere again by putting the next code in between the < style>" and < /style> tags as such (usually at the top of your page):

    div.noback{
background:none;
}

    And then on the div that we put the in line style command, remove the style command and instead add this to the class "noback" and now you can just set a div class to noback and it will do this on that div as well. Keep in mind you want to move this code to your CSS file if you have one so that its avialable on all pages.