Aligning navbar text to the right with Bootstrap 4

Question

I'm trying to create a google clone but I can't get li's to the very right of the page with Bootstrap 4, this link contains the code that I'm trying to edit, I tried to add mr-auto and justify-content-end to the ul but still, nothing works.

Fiddle

Dan Kreiger · Accepted Answer · 2017-10-02T13:57:24.330

If you only want the items to the very right, you can use

.navbar-nav {
  align-items: flex-end;
}

The ul is set with flex-direction: column;, which means that you have to use align-items to position items horizontally and justify-content to position items vertically.

Try this snippet:

.navbar-nav {
  align-items: flex-end;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-light bg-white ">
  <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 navbar-right mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Gmail</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Images</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Circle
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

<!--Bootstrap Scripts;-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

If you want everything to the very right of the page (the hamburger icon and the items), you can do this:

.navbar-nav {
  align-items: flex-end;
}

nav.navbar {
   justify-content: flex-end;
}

.dropdown.show, .dropdown-menu.show {
  text-align: right;  
}

Since nav.navbar has the default flex-direction: row, justify-content positions content horizontally and align-items positions content vertically for nav.navbar.

I set text-align: right; on the list item dropdown so that it stays aligned to the right when it is opened.

Try this snippet below:

.navbar-nav {
  align-items: flex-end;
}

nav.navbar {
  justify-content: flex-end;
}

.dropdown.show, .dropdown-menu.show {
  text-align: right;  
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-light bg-white ">
  <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 navbar-right mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Gmail</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Images</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Circle
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>


<!--Bootstrap Scripts;-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

Update

This snippet will make sure everything is aligned to the right on all screen widths. I removed mr-auto from the html since it interfered with flexbox's ability to justify the content to the end of the flex container.

.navbar-nav {
  align-items: flex-end;
}

nav.navbar {
  justify-content: flex-end;
}

.dropdown.show,
.dropdown-menu.show {
  text-align: right;
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-collapse {
    justify-content: flex-end;
  }
  .dropdown-menu.show {
    left: -8rem;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Google.css">

<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-light bg-white ">
  <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 navbar-right">
      <li class="nav-item">
        <a class="nav-link" href="#">Gmail</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Images</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Circle
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

<!--Bootstrap Scripts;-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

Thanks for the answer, The hamburger to the right works but aligning the items itself still won't work, I'm confused. — CEALOA, Oct 02 '17 at 13:30
Hmm - in the second snippet everything is aligned to the right. Isn't that what you want? — Dan Kreiger, Oct 02 '17 at 13:33
yes but also, I wanted to set the li's in the ul to the very right of the navbar so the text will appear on the right when the browser is in the pc full screen. — CEALOA, Oct 02 '17 at 13:37
@CEALOA I added another snippet at the bottom that will work on desktop views as well. — Dan Kreiger, Oct 02 '17 at 13:57
No problem. I'm glad it helped :) Sorry I forgot about the desktop view initially. — Dan Kreiger, Oct 02 '17 at 14:47

Aligning navbar text to the right with Bootstrap 4

1 Answers1