Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Twitter Bootstrap

Changing Bootstrap Navbar Color

Post a Comment
I was attempting to change the navbar color in Bootstrap, but it was unsuccessful. The navbar just stays the same as if I never added the CSS or custom styling. I added the custom

Solution 1:

I found the solution to the issue that was occurring. It was quite a simple issue actually.

The issue was that I was adding the bootstrap CSS in the HTML after the custom css was added.

So it should've been:

<head><!-- Custom Styling --><!-- Bootstrap --><linkhref="css/bootstrap.min.css"rel="stylesheet"><linkrel="stylesheet"href="css/style.css" /></head>

Thanks for all the help.

Solution 2:

Bootstrap NavBar Generator is what you need. It is a little bit tricky when you use the CSS generated.

In case you find that after you insert the generated stylesheet the NavBar does not change at all.

Please including the following was what made it possible to change the navbar color:

.navbar{ 
    background-image: none;
}

Hope this is helpful. :D

Solution 3:

As of Bootstrap 4 you can easily change the colour of a navbar background with the 'bg' class. A few examples are below:

<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top">
<aclass="navbar-brand"href="#"><divclass="collapse navbar-collapse"><imgsrc="#"alt="Logo"style="width:300px;"></a><ulclass="navbar-nav ml-auto"><liclass="nav-item"><aclass="nav-link"href="#">Home</a></li></ul></nav>

It is a basic navbar which expands on larger devices, collapses on smaller ones, and sticks to the top of the page. The "bg-white" element changes the background colour of the navbar from the default grey colour to white. A few more examples are:

bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark
bg-white

Post a Comment for "Changing Bootstrap Navbar Color"