CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3navbar
Sarah
Sarah

Reputation: 61

How to Change Background Color of Bootstrap Navbar

I'm trying to change the color of a navbar coded in Bootstrap. So far, there have been built in Bootstrap classes applied to the navbar to change both the color of the background and the anchor links in it, but they have not changed the color at all. Is there something that could be done to fix this?

Here is the HTML:

<!-- import Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-light bg-white navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>    
      </button>
      <!-- <a class="navbar-brand" href="#">WebSiteName</a> -->
      <a href="index.html"><img src="fusebloomLogo.png" alt="FuseBloom logo" class="logo"/></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#home">Home</a></li>
        <li><a href="#mission">Mission</a></li>
        <li><a href="#reviews">Reviews</a></li>
        <li><a href="#process">Process</a></li>
      </ul>
    </div>
  </div>
</nav>

Upvotes: 1

Views: 7418

Answers (5)

Code on the Rocks
Code on the Rocks

Reputation: 17576

Tailwind Solution

All of the React Bootstrap components can be styled with TailwindCSS so you can just add a bg- color to the className:

<Navbar
        expand="lg"
        className="px-3 bg-stone-800"
      >
...

</Navbar>

Upvotes: 0

Cecily
Cecily

Reputation: 11

For Bootstrap v5 they have background color utilities. So you can just add one of the pre-made Bootstrap colors by adding a certain class. For example, adding the class bg-primary will color the background of the navbar that primary Bootstrap blue color. They also have yellow which you can add with the class bg-warning

Here's a link to all the available colors:

https://getbootstrap.com/docs/5.2/utilities/background/

Upvotes: 1

Harry Potter
Harry Potter

Reputation: 157

.navbar-light {
    background-color: yellow !important;
    border: none !important;
    border-width:0!important;
}

Upvotes: 4

Rdb
Rdb

Reputation: 104

Have you checked color-boostrap v5

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

Upvotes: 1

Harry Potter
Harry Potter

Reputation: 157

.navbar-light {
    background-color: yellow !important;
}

Upvotes: 1

Related Questions