I'm newish to programming and brand new to HTML. Currently doing a class assignment for my Web Development class where we are making a web page for a fictional company called "DW Gift Company." One of the project requirements is a navbar at the top (not fixed) that leads to a few different sub-pages (About, Items, Order, etc.). However, I'm stuck on the navbar part and can't seem to get the navbar to look right.
Here's my code below. I've got the nav tag with what I'm fairly sure are the correct classes along with ul's and li's (I know ul is an un-ordered list but I'm not 100% sure what li is. I'm following an online vid from my prof and I'm Germ X level(99.9%) sure I've followed along right and typed exactly what he has but mine looks nothing like his(I've attached what its supposed to look like and what mine looks like as well as what he has).
My code:
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/DWstyle.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<img src="C:\Users\Mason\Desktop\h4_starter\DWGiftLogo.png">
<nav class="navbar navbar-expand-lg navbar-light bg-beige">
<a class="navbar-brand">DW Gift Company</a>
<div class="collapse navbar-collapse" id="DWnavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 8</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 9</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
Roughly what I want it to look like.
What mine looks like.
What my prof's looks like.
I imagine the bullets have something to do with the li's but I'm not sure.
Tl;dr: I'm trying to make a navbar in HTML for a website and it isn't looking like it's supposed to even though I feel like I've followed my instructors code exactly from his online video.
Include bootstarp's files From its CDN paths like this
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
Most probably your files were not present where you are expecting them to be as per your your html code.
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
These 2 lines mean that your css(bootstrap.min.css and bootstrap-theme.css) must be present in a folder named css parallel to the html.
You should either download the boostrap's css and keep them in folder named css parallel to your html file or just access the files from their CDN path (which is hosted by bootstrap itself) .
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-beige">
<a class="navbar-brand"><img src="C:\Users\Mason\Desktop\h4_starter\DWGiftLogo.png">DW Gift Company</a>
<div class="collapse navbar-collapse" id="DWnavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 8</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 9</a>
</li>
</ul>
</div>
</nav>
</body>
</html>