W3docs
en
Log in

How to Align the Last Bootstrap Menu Item to the Right

In this tutorial, we will demonstrate how you can align the last menu item to the right in Bootstrap. Read the snippet and find some solutions to this problem.

Tags

Solutions for Bootstrap 4

If you have a Bootstrap navbar and want to align its last menu item to the right, this snippet is for you.

So, to align the last menu item to the right, we use w-100 on navbar-nav and ml-auto on the dropdown item. Also, note that the navbar-toggleable-* classes have changed to navbar-expand-*. Let’s see an example.

Example of aligning the last Bootstrap navbar item to the right:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav w-100">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="https://www.w3docs.com/">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.w3docs.com/privacy-policy">Privacy Policy</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://www.w3docs.com/about-us">About Us</a>
            </li>
            <li class="nav-item dropdown ml-auto">
              <a class="nav-link dropdown-toggle" href="#" 
                 id="navbarDropdownMenuLink" role="button" 
                 data-toggle="dropdown" aria-expanded="false">
                Dropdown link
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <li>
                  <a class="dropdown-item" href="https://www.w3docs.com/learn-html.html">Books</a>
                </li>
                <li>
                  <a class="dropdown-item" href="https://www.w3docs.com/snippets">Snippets</a>
                </li>
                <li>
                  <a class="dropdown-item" href="https://www.w3docs.com/quiz/">Quizzes</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>
Try it Yourself »

Another solution for Bootstrap navbar right alignment includes a button on the right, which remains outside of the mobile collapse nav, and it is always displayed at all widths. In the following example, resize the browser window to see how the navbar changes.

Example of aligning the last Bootstrap menu item to the right:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
  </head>
  <body>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="https://www.w3docs.com/">Home</a>
        <button class="btn btn-success ml-auto mr-1">Always Visible</button>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="https://www.w3docs.com/tool/">Tools</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="https://www.w3docs.com/string-functions/">String Functions</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>
Try it Yourself »

Note: Bootstrap 4 is end-of-life. In Bootstrap 5, margin utility classes are direction-aware, so you would use ms-auto instead of ml-auto.