0

I'm building a site and I'm using Bootstrap for styling.

So far, it's just a title and navbar but it's not showing any CSS. If I open this, the entire navbar is stacked vertically and I also don't understand why my "Contact" button is indented with a bullet beside it. Could I get some input here? Let me know if there are further details needed to assess the situation.

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>My Portfolio Website</title>

    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com
    /bootstrap/4.4.1/css/bootstrap.min.css"> 

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/
    4.4.1/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/
    fontawesome-free@5.15.4/css/fontawesome.min.css">

</head>

<body>
    <section id="nav-bar">

        <nav class="navbar navbar-expand-lg navbar-light">

            <a class="navbar-brand" href="#">Navbar</a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" 
            data-target="#navbarNav" aria-controls="navbarnav" 
            aria-expanded="false" aria-label="Toggle navigation">

              <span class="navbar-toggler-icon"></span>

            </button>
          
            <div class="collapse navbar-collapse" id="navbar-nav">

              <ul class="navbar-navbar-nav">

                <li class="nav-item">

                  <a class="nav-link" href="#">Home </a>

                </li>

                <li class="nav-item">

                  <a class="nav-link" href="#">About</a>

                </li>

                <li lass="nav-item">

                  <a class="nav-link" href="#">Projects</a>

                </li>

                  </div>

                </li>

                <li class="nav-item">

                  <a class="nav-link" href="#">Contact</a>

                </li>

              </ul>
      
               </div>

          </nav>

    </section>
    
</body>
M.W
  • 1
  • 2
  • 1
    When loading external `CSS` and `JS` files into an HTML file, the order in which those files are loaded matter. You have `style.css` at the top, then followed by Bootstrap styles. That is, whatever style declaration you might have in `style.css` will be overridden by Bootstrap CSS. – Bumhan Yu May 03 '22 at 04:17
  • Are there error messages in the browser console or on the Network tab? – Alexander May 03 '22 at 04:18
  • Is your css inside a folder? how does your folders looks like on your server?? like what Bumhan said the arrangement of your call is important. Make sure to use a unique id's and classes since you are using bootstrap also. – Crystal May 03 '22 at 04:25
  • @Alexander no error messages – M.W May 03 '22 at 17:16

1 Answers1

-1

I think it could be a cache problem, try Ctrl + Shift + R if you're on Windows or Command + Shift + R if you're on Mac, while you're on the browser trying to render.

Source: Force browser to refresh CSS, JavaScript, etc

me_zee
  • 11
  • 2
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 05 '22 at 09:29