How to Right-Align a Nav Bar in Bootstrap 4

Making the header nav-bar (or any nav-bar for that matter) right-aligned in Bootstrap 4 is not as simple as it used to be in previous versions of Bootstrap, but even though that is the case, there’s still not much to it.

There are two classes that you need to add to accomplish this:

  1. Add .justify-content-end to your .navbar-collapse <div>.
  2. Add .align-items-end to your .navbar-nav <ul>.

That’s it! Here’s an example and then a code play area in Codeply to play around with:

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="#">robswiger.com</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    
      <div class="navbar-collapse collapse justify-content-end" id="navbarsExampleDefault">
        <ul class="navbar-nav align-items-end">
          <li class="nav-item active">
            <a class="nav-link" href="#">Menu Item</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Menu Item</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Menu Item</a>
          </li>
        </ul>
      </div>
    </nav>

 

Sample in Codefy