1

My custom CSS stylesheet are not working when I use Bootstrap. !important tag doesn't work (I also heard !important is not a good practice) and Using ID instead of Class is not a good idea as style will be used multiple times.

Is there a way to override Bootstrap without using ID?

HTML with bootstrap and custom css linked

 <header>
    <nav class="navbar navbar-expand-md navbar-dark navbar-custom">
        <a class="navbar-brand" href="index.html">Jake Yoon</a>
    </nav>
</header>

custom css

.navbar-custom {
   background-color: lightsteelblue;
   font-size: 25px;
   color: white;
}
Rayees AC
  • 4,426
  • 3
  • 8
  • 31
Jake Yoon
  • 120
  • 1
  • 5
  • 1
    Does this answer your question? [How can I override Bootstrap CSS styles?](https://stackoverflow.com/questions/20721248/how-can-i-override-bootstrap-css-styles) – FluffyKitten Sep 08 '20 at 01:43
  • Include your CSS after Bootstrap, and if you are overriding any of Bootstraps styles make sure you use a selector that is at least as specific (i.e. it has the same full selector) – FluffyKitten Sep 08 '20 at 01:44
  • I've seen the post before but didn't really help me because using ID was not a good idea. I understand what you're saying about choosing selector Thanks! – Jake Yoon Sep 08 '20 at 02:02
  • 1
    There are other answers apart from the id too, just because one is accepted doesn't mean that its the only one to look at :) And the first comment on the accepted answer suggest making the id a class, exactly like the answer below. – FluffyKitten Sep 08 '20 at 02:05

2 Answers2

1

This may not be the best answer. But this is how I manage :

<div class="bootstrap-classes eg.navbar">
     <span class="custom-classes">hello world</span>
</div>

Use bootstrap classes in parent. Create a child and use your own classes on it. This works for me.

Kavindu Pasan Kavithilaka
  • 450
  • 6
  • 12
0

you can use the key word

important!

to override the bootstrap class. an example is given below

 .navbar-custom {
   background-color: lightsteelblue !important;
   font-size: 25px !important; 
   color: white !impotant;
}
 <header>
    <nav class="navbar navbar-expand-md navbar-dark navbar-custom">
        <a class="navbar-brand" href="index.html">Jake Yoon</a>
    </nav>
</header>
This only you want to change the CSS file.