CODEWITHSUNDEEP
htmlcssbootstrap-4
Jake Yoon
Jake Yoon

Reputation: 138

How to add custom CSS stylesheet when using Bootstrap

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;
}

Upvotes: 1

Views: 1521

Answers (2)

user12930956
user12930956

Reputation:

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.

Upvotes: 0

Kavindu Pasan Kavithilaka
Kavindu Pasan Kavithilaka

Reputation: 500

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.

Upvotes: 1

Related Questions