Bootstrap Navbar formatting issues

This is my first post so please bare with me. I'm relatively new to programming, and had signed up for a course for full stack dev a while ago. I recently jumped back into the lessons and have gotten stuck on a bootstrap navbar.

I've followed bootstrap and navbar instructions to the point where I know bootstrap is effecting the browser page on my localhost, but the formatting is doing something wrong from both the lessons and multiple tutorials I've used to try and figure it out. When I input the code into codeply.com there is nothing wrong with the formatting in its display area. I don't know if it's gemfile issues, version issues or something I haven't been able to consider due to a lack of experience.

I am definitely stuck on this right now and would appreciate any help!

This is the code I am using:

  <div class="container">
         <nav class="navbar navbar-expand-lg navbar-light">
             <a href="#" class="navbar-brand">Bootstrap 5</a>
             <button
               class="navbar-toggler"
               type="button"
               data-bs-toggle="collapse"
               data-bs-target="#toggleMobileMenu"
               aria-controls="toggleMobileMenu"
               aria-expanded="false"
               aria-lable="Toggle navigation"
             >
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="toggleMobileMenu">
                 <ul class="navbar-nav mx-auto">
                     <li><a class="nav-link" href="#">Pricing</a></li>
                     <li><a class="nav-link" href="#">Features</a></li>
                     <li><a class="nav-link" href="#">Contact</a></li>
                     <li><a class="nav-link" href="#">Fourth One</a></li>
                 </ul>
             </div>
         </nav>
     </div>
     <h1>Hello, World!</h1> 

This is a picture of the issue that is occuring: Bootstrap Navbar Issue

Boostrap needs to either have a CSS file loaded on your computer or have it linked at the top.

Something like this:

 <!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

I recommend using their online links as its faster to load and unless you wanna change stuff manually its just faster.

If you download bootstrap to your computer you need to link the file. Something like this:

<link rel="stylesheet" href="{% static 'css/style.css' %}">

keep in mind this snippet works for django. Not sure what youre using. so you might have to edit the href part.