Applying css on

Question

Why isn't the CSS property applying to <nav>? Can we not do our own styling on these tags of bootstrap? If we can, how?

nav{
  display: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
          
<nav class="navbar bg-dark nav-light shadow">
  <h1 style="color:white">hello</h1>
</nav>

use `nav.navbar` to make it work... you can inspect element and see that *specificity* is at work here... — kukkuz, Apr 19 '19 at 18:20
Also, make sure that your own CSS comes after the link to Bootstrap. — Mr Lister, Apr 24 '19 at 17:47

score 2 · Answer 1 · answered Apr 19 '19 at 18:21

As pointed out by @kukkuz CSS uses specifity to apply styling. So simply editing the selector will do the trick

nav.navbar {
  display: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
          
<nav class="navbar bg-dark nav-light shadow">
  <h1 style="color:white">hello</h1>
</nav>

Applying css on

1 Answers1