HTML/CSS (Bootstrap) Class styling doesn't work

Question

I'm having trouble with setting the background color on the jumbotron class and the text color in the navbar. It works when I change from class to id, but I don't understand why it won't work when I use class (notice that background-color works in navbar, but not the color). I worked when I used inline styling, but I want to style it in CSS. It is usually no problem to add or change background color, but I'm new to Bootstrap, so maybe there is some limitations in css when using this that I don't know about or something I have missed?

    h1{
      text-align: center;
    }
    
    p{
      text-align: center;
    }
    
    .navbar{
      background-color: #d9b38c;
      color: white; /*this doesn't work*/
    }
    
    .jumbotron{
      background-color: #cccc99; /*this won't work either*/
    }

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     
        <title>Hytte til leie</title>
      </head>
      <body>
    
        <div class="jumbotron">
          <h1> LEI DIN DRØMMEHYTTE </h1>
          <p> Vi finner hytten som passer perfekt til deg </p>
        </div>
    
        <nav class="navbar">
      <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="#">DinHytteDrøm</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Hjem</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Våre hytter <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Fjellhytter</a></li>
                <li><a href="#">Skogshytter</a></li>
                <li><a href="#">Sjøhytter</a></li>
              </ul>
            </li>
            <li><a href="#">Informasjon</a></li>
            <li><a href="#">Kontakt oss</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Lag bruker </a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Logg inn </a></li>
          </ul>
        </div>
      </div>
    </nav>
    
    <div class="container-fluid">
      <h3>Collapsible Navbar</h3>
      <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
      <p>Only when the button is clicked, the navigation bar will be displayed.</p>
    </div>
    
      </body>
    </html>

Bootstrap styles goes first then your styles. Look at your tag and change the order. — Julian Espinosa, Oct 25 '18 at 21:25
Your own styles are being overriden by the Bootstrap CSS file. See here: [In which order do CSS stylesheets override?](https://stackoverflow.com/questions/9459062/in-which-order-do-css-stylesheets-override) — Turnip, Oct 25 '18 at 21:26
Now the background color on jumbotron works, but the text color in navbar still won't change.. — Silje, Oct 25 '18 at 21:33
@Silje try inspecting (browser tool, right click on element and "inspect") the text to see which style rules are affecting it. It may be that your text is affected by more specific selectors than `.navbar` — Frish, Oct 25 '18 at 22:44
I could have done it using css by overriding the navbar classes and putting them in custom css but there are a whole bunnch of them media queries and all so better do it by inline styling and morevoer it only two simple attributes there `background-color` and`color` — Nikhil S, Dec 08 '19 at 16:35

score 0 · Answer 1 · answered Oct 26 '18 at 04:56

0

You can try using internal css or if you donot want to do that then you can use inportant tag with your css

.jumbotron{
   background-color: #cccc99!important; /*this won't work either*/
 }

answered Oct 26 '18 at 04:56

Therichpost

1,759
2
14
19

score 0 · Answer 2 · answered Oct 26 '18 at 05:05

It's because of the CSS priority. If you want to overwrite any style provided by bootstrap just use !important in your CSS.

.jumbotron{
   background-color: #cccc99 !important; 
 }

And also put your CSS files below the bootstrap.min.css file. It's all about priority. The last one will get priority. Like:

<style> inside <head> tag will get more priority then external CSS file. And Inline CSS will get priority over both of the above.

HTML/CSS (Bootstrap) Class styling doesn't work

2 Answers2