Why is my nav bar not displaying using HTML CSS and Bootstrap?

Question

I am trying to make a website and stated to code the nav bar using HTML, CSS and Bootstrap but my nav bar is not displaying in Chrome when I open my index.html file. I just see an empty white screen instead of my nav bar. Please see code below and advise where I am going wrong.

This is my html file:

<html>
<head>
<title> Name of website </template>
<link rel="stylesheet" href="style.css">
<!-- CSS only Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" >

<!--JQuery Bootstrap-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/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="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>
</section>
</body>

</html>

and this is my css file:

*
 {
    margin: 0;
    padding: 0;
}
body
{
    font-family: Arial, Helvetica, sans-serif;
    
}

Wanny Miarelli Wanny Miarelli · Accepted Answer · 2022-04-17T12:54:06

This is causing the page to fail the rendering

<title> Name of website </template>

It should be

<title> Name of website </title>

Why is my nav bar not displaying using HTML CSS and Bootstrap?

1 Answers