Solution 1 :

The code above aligned it to the right for me when I tried it but I had to close out <nav>. In your code, you forgot to close it out with </nav>. Also, make sure you linked the bootstrap CDN properly by adding <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> in the head of your html.I fixed the toggle button which wasn’t working in smaller screens. Here is my code with the bootstrap style sheet included. Copy it and run it to see if it works for you.

 <nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark">
    <div class="container">
    <a class="navbar-brand text-white" href="#" >tinDog</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    
       <ul class="navbar-nav ml-auto ">
           <li class="nav-item">
               <a class="nav-link text-light" href="#">Contact</a>
            </li>
            <li class="nav-item">
             <a class="nav-link text-light" href="#">Pricing</a>
          </li>
          <li class="nav-item">
             <a class="nav-link text-light" href="#">Download</a>
          </li>
          
          
       </ul>
    </div>
</div>
 </nav>

Problem :

its been so nice with stack overflow.I am currently in a bootcamp of Angela Yu.using bootstrap is fun but in the navbar section i am facing some issues.I cant move my nav item to the right.in the ul ,I am using a class ml-auto but its not running.For your better experience I m putting full code-

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="">tinDog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"  id="navbarTogglerDemo01" >
<ul class="navbar-nav ml-auto">
    <li  class="nav-item">
      <a class="nav-link" href="#"> contact</a>
    </li>
     <li  class="nav-item">
      <a class="nav-link" href="#"> Pricing</a>
    </li>
     <li  class="nav-item">
      <a class="nav-link" href="#"> download</a>
    </li>
</ul>
</div>
</div>

i have put all other elements nicely!
can you guys give me a way or modify this code for my purpose?

Comments

Comment posted by Love2Code

Please add a code snippet thanks

By