0

I wanna change the style given by some bootstrap classes but when I try to access elements from the .css sheet nothing happens. How can I use bootstrap classes but still being able to change styling features? Is there a different way to access elements or to make sure that priority is gonna be given to .css code?

More specifically right now I'm trying to style a navbar. I wanna remove the text-decoration and separate the

  • elements.

    Here's the code:

    <!doctype html>
<html lang="en-us">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel"stylesheet" type="text/css" href="style.css">
  </head>
  <body>
   
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-8">
          <nav class="navbar navbar-expand-sm">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <i class="fas fa-bars"></i>
          </button>
          <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav" id="navbar">
              <li class="nav-item">
                <a class="nav link active" href="/home.html">Home</a></li>
              <li class="nav-item">
                <a class="nav link" href="/blog.html">Blog</a>
              </li>
              <li class="nav-item">
                <a class="nav link" href="/digitalNomad.html">Digital Nomad</a>
              </li>
              <li class="nav-item">
                <a class="nav link" href="/about.html">About</a>
              </li>
            </ul>
          </div>
          </nav>
        </div>

        <div class="col-sm-4">
          <ul>
            <li>Facebook</li>
            <li>Instagram</li>
            <li>Twitter</li>
          </ul>
        </div>
      </div>
    </div>
    
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>
    • Mr.Kushwaha
    • 491
    • 5
    • 14
    Blank
    • 96
    • 1
    • 12
    • can you add your style CSS also? – BugHunter May 02 '18 at 12:07
    • I didn't write much of css as it wasn't working. I gave a specific example just to make sure the question would be understandable but the main problem is how to I actually modify an element which has been styled by bootstrap. – Blank May 02 '18 at 12:12
    • Make sure the custom styles follow the bootstrap.css and learn about CSS specificity. – Carol Skelly May 02 '18 at 12:16
    • Thanks @ZimSystem! that's exactly what I was looking for! – Blank May 02 '18 at 12:18

    0 Answers0