Bootstrap is a fantastic CSS framework that comes with stylish design right from the start. It's a valuable tool for wireframing as you can easily enhance your layout by adding certain classes. However, one drawback is that Bootstrap styling tends to override custom styles due to its specificity in targeting.
Browsers prioritize more specific elements when conflicting styles are present. For example:
html body #wrapper ul li will take precedence over ul li.
In dealing with Bootstrap conflicts, there are several options available:
Option 1
To combat this issue, be more specific in your CSS selectors by using prefixes like html body to target elements more precisely.
Option 2
You can also use the !important declaration in your CSS properties to give them top priority. Keep in mind that if two statements have !important, browsers will still favor the more specific one:
html body ul li{ display: none !important; }
body ul li{ display: block !important; }
<!-- result: <li> will be hidden. -->
However, it's generally advised to use !important sparingly as a last resort.
Option 3
Create new unique classes for your elements to avoid conflicts. By targeting classes that are not used elsewhere, such as .flaviusPopaStyling, you increase the chances of browsers applying your custom styling.
.navbar-light .navbar-nav .nav-link.flaviusPopaStyling{
padding: 0 20px;
color: black;
transition:0.3s ease;
}
.navbar-light .navbar-nav .nav-link.flaviusPopaStyling:hover,
.navbar i:hover,
.navbar-light .navbar-nav .nav-link.flaviusPopaStyling.active{
color:coral;
}
Don't forget to add the class to your HTML elements, like so:
<a class="nav-link active flaviusPopaStyling" aria-current="page" href="#">Home</a>
Bonus option
Instead of relying solely on classes, consider using a non-reserved attribute like contains.
<nav contains='customNavBar' class="navbar navbar-light . . .">
This approach adds semantic value to your HTML and provides distinct identifiers for CSS targeting. It also ensures that JavaScript manipulation won't interfere with your styling, for instance through toggleClass. As you mentioned being new to styling, this may seem confusing at first, but it's worth exploring further down the road.
I hope this information proves helpful!