How can I override bootstrap with my customized style.css?

Question

I'm trying to override some of Bootstraps' styling in order to create a specific look. I was explained that as I long as my custom style.css was linked after the bootstrap CDN, then I would be fine.

However, this does not seem to be the case.

The following is my index.html:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nathan Coder</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">

      <a class="navbar-brand" href="index.html" style="margin-left: 100px;">Nathan Coder</a>
    </div>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">About</a></li>
        <li><a href="#">|</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">|</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

</body>
</html>

And this is my style.css:

nav {
    border-bottom: 3px;
    border-color: #4aaaa5;
}

.navbar-brand {
    color: #4aaaa5;
    background-color: #ffffff;
    font-size: 150%;
    font-family: 'Georgia', Times, Times New Roman, serif;
    padding: 20px;
}

And it's just not working properly. Any hints?

Is your style.css file in the main directory or is it in another folder? — Steve K, Dec 02 '17 at 06:13
Just be more specific in the custom CSS. Add a parent class before or another class for nav/ navbar-brand. Avoid to use the tag !important, this will cause more problems on responsive. — Madalina Taina, Dec 02 '17 at 10:30
@MadalinaTaina this was solution. I just needed to be more specific in my CSS. — Nathan Aaron Coder, Dec 04 '17 at 15:03
@NathanAaronCoder Great! I'm happy my solution helped you to solve your issue! :) — Madalina Taina, Dec 05 '17 at 04:42

score 0 · Answer 1 · answered Dec 02 '17 at 06:05

First of all, make sure that you are listed in the head after CSS bootsrap. Then, try to label it with body class and preant div class

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">

body.class_name nav {
border-bottom: 3px;
border-color: #4aaaa5;
}
or
div.class_name nav {
border-bottom: 3px;
border-color: #4aaaa5;
}

How can I override bootstrap with my customized style.css?

1 Answers1