How to Align the Last Bootstrap Menu Item to the Right

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 "dropdown". Also, note that the navbar-toggleable-* classes have changed to navbar-expand-*. Let’s see an example.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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>

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 justify-content-end">
      <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 flex-grow-0" id="navbarSupportedContent">
        <ul class="navbar-nav text-right">
          <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>
    </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>