Why is my bootstrap navbar css not working?

Question

I wanted to use this bootstrap generator which was recommended in this post The generated code doesn't change anything, and my guess is I messed up on my labeling somewhere.

<div style="background-color: #18305c">
  <div class="container text-center">
    <nav class="navbar navbar-default" role="navigation">
      <div class="btn-group" role="group" aria-label="...">
        <button type="button" class="btn btn-default">
          Home
        </button>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Browse <span class="caret"></span>
         </button>
           <ul class="dropdown-menu">
           <li><a href="#">Latest Offers</a></li>
           <li><a href="#">Newest Listings</a></li>
           <li><a href='#'>Clearance</a></li>
           <li><a href='#'>Search</a></li>
           <li><a href='#'>Blog</a></li>
           </ul>
        </div>

The css looks like

 .navbar-default {
 background-color: #18305c;
 border-color: #d49418;
 }
.navbar-default .navbar-brand {
color: #ffffff;
 }
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffffff;
}
 .navbar-default .navbar-text {
  color: #ffffff;
}

Why is it not changing?

Edit: Wanted to add this is only the top of the nav bar. There are a few more buttons with similar dropdown.

write your code in https://plnkr.co/ , here we can run the code, and that might help anyone to figure out the issue easily — random, Mar 24 '16 at 21:08
did you add the links and/or script tags for the bootstrap cdns? — Cooper Buckingham, Mar 24 '16 at 23:36
What do you need help changing? There is no .navbar-brand and no .navbar-text anywhere in the html that you posted. Only the navbar default class and that background is changing just fine https://jsfiddle.net/wamosjk/ghde2101/ So I am confused as to what you are having issues with — Steve K, Mar 25 '16 at 00:37
The buttons are supposed to be blue and the text is supposed to be white. — Tyler Jensen, Mar 25 '16 at 01:54

random · Answer 1 · 2016-03-25T09:16:36.923

0

Okay. So by reading the above comments, you want to change the button color.

You have used the class btn-default, If you want the button color to be of blue change its class to btn-primary.

Checkout this link for various button colors.

edited Mar 25 '16 at 09:16

answered Mar 25 '16 at 09:08

random

7,756
3
19
25

I don't want to use the standard colors. I am trying to use this- http://work.smarchal.com/twbscolor/ – Tyler Jensen Mar 31 '16 at 16:28
Okay. Then you can customize the bootstrap css. Give a specific ID to the element . For example button and change the background color. //CSS #home{background-color:violet} – random Apr 02 '16 at 17:46

Why is my bootstrap navbar css not working?

1 Answers1