Bootstrap v5.0.0-beta1 - ml-auto not working for navbar

Question

I'm trying to setup a navbar where the links would be to the right when screen is large enough and the bar is not collapsed. However, despite having ml-auto included as the class in the unordered list (ul) tag, the links (Contact, Pricing, Download) are still stuck to left next to the Brand item. How do I fix this? The following is the code:

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
  <section id="title">
    <nav class="navbar bg-dark navbar-expand-lg navbar-dark">
      <a class="navbar-brand" href="#">brand</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="w-100">
        <div class="navbar-collapse collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <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>
   </nav>

@OsamaD how would i right align a single list item ? ```ms-auto``` doesn't seem to work. — shaderone, Jun 03 '21 at 15:22
navbar-nav w-100 d-flex justify-content-end This working form eme — Narendra Sagadevan, Jun 19 '21 at 15:24
Try using ms-auto, Bootstrap 5 replaced left and right by start and end for RTL support. ml-auto => ms-auto (start) mr-auto => me-auto (end) — Rahul Sarma, Jul 10 '21 at 03:09

score 12 · Accepted Answer · edited Jun 20 '23 at 15:17

Hi Gokulan,

Let's use the mr-auto instead on the <ul> tag to move the elements to the right. If is possible, please use the code I am providing you with on this post. Don't forget to run it in full page if you test this snippet first on stackOverflow to see the results. I certainly hope this helps, pal!

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>TinDog</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
   </head>
   <body>
      <section id="title">
      <!-- Nav Bar -->
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
         <div class="container-fluid">
            <a class="navbar-brand" href="#">Brand</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto">
                  <li class="nav-item">
                     <a class="nav-link active" aria-current="page" 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>
      </nav>
   </body>
</html>

Instead of using justify-content-end we can directly use ms-auto. This comes with the newer version of BootStrap, where l is replaced with s for start and r is replaced with e for end.

Thanks! It works now with the code you provided. Before, changing between ml-auto and mr-auto didn't work. Adding the container-fluid div class and the justify-content-end div class helped. — Gokulan Thedchana, Dec 12 '20 at 08:24
Excellent, I am glad to hear this was of help! Now, As the asker, you have a special privilege: you may accept the answer that you believe is the best solution to your problem so that others know that this has already been properly responded. Thanks and keep on coding, it is great to do so! — Alvison Hunter, Dec 13 '20 at 18:26
Check this [question](https://stackoverflow.com/questions/65253543/how-to-align-nav-items-to-the-right-in-bootstrap-5/65254055#65254055), there is an update in the Bootstrap 5. Hope it helps! cheers — Arshpreet Singh, May 28 '22 at 21:05

Bootstrap v5.0.0-beta1 - ml-auto not working for navbar

1 Answers1