Search code examples
htmlcsstwitter-bootstrapbootstrap-5

Bootstrap 5 - justifty-content-end is not working


I am trying to create a header using bootstrap 5. Within the header I have a navbar with links that I would like to float to the right. After looking on the bootstrap website I noticed that they added a justifty-content-end class to their menu list items. When I do this the items stay to the left. I have even tried adding float: right to the nav but this doesn't work either.

Here is my html

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
      <ul class="nav justify-content-end" id="myNavbar">
  <li class="nav-item">
    <a class="nav-link" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>

My css

ul {
float: right !important:
}

Can someone please explain how to fix this?


Solution

  • Check this solution, I have tried in my machine, this code working properly.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
    </head>
    <body>
    
        <nav class="navbar navbar-dark bg-dark d-flex justify-content-end">
            <!-- Navbar content -->
                <ul class="nav" id="myNavbar">
            <li class="nav-item">
              <a class="nav-link" href="#">Active</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
          </ul>
    
          <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
        
    </body>
    </html>