Bootstrap 3 conflicts with W3.CSS Navigationbar

Question

I´ve got a little problem. Whilest experimenting with Bootstrap and W3.CSS, I decided to create a w3-navbar.

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="rsc/bootswatch-cosmo.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="w3-top">
  <div class="w3-bar w3-black w3-hide-small w3-hide-medium">
    <a href="#" class="w3-bar-item w3-btn w3-border-black w3-bottombar w3-hover-border-white" style="text-decoration: none;"><i class="fa fa-vcard fa-fw" ></i> SAMPLE</a>
    <a href="#" class="w3-bar-item w3-btn w3-border-black w3-bottombar w3-hover-border-white" style="text-decoration: none;"><i class="fa fa-star fa-fw"></i> SAMPLE</a>
    <a href="#" class="w3-bar-item w3-btn w3-border-black w3-bottombar w3-hover-border-white" style="text-decoration: none;"><i class="fa fa-image fa-fw"></i> SAMPLE</a>
    <a href="#" class="w3-bar-item w3-btn w3-border-black w3-bottombar w3-hover-border-white w3-right" style="text-decoration: none;"><i class="fa fa-user-circle fa-fw"></i> SAMPLE</a>
  </div>
</div>

It´s looking awesome without bootstrap, but when I add the bootstrap libraries the text of the navigation bar elements turns blue.
Is there a way to fix this problem? As seen above I even added style="text-decoration: none;" to all the navbar-elements to remove the blue, but it just wont go away. Thanks in advance for all helpful answers, - SearchingSolutions

Answer 1

When working with styles that get applied by a 3rd party stylesheet, it is sometimes necessary to use the !important declaration to override those styles. For instance you might try:

.w3-bar-item, .w3-bar-item:hover
{
    color: #000 !important;
    text-decoration: none !important;
}

Note that the best practice is generally not to use !important because it undermines the normal specificity rules by which the browser decides which styles to apply in cases where there are multiple. However, if your 3rd party styles used it, you may have no other choice. Alternatives are checking to make sure bootstrap's CSS is loaded FIRST, so that it gets overridden, or modifying the bootstrap CSS directly to remove the color. However if you change bootstrap's CSS file, it will make upgrading it a pain later.