CodeDump
CEALOA CEALOA - 1 year ago 199
CSS Question

Aligning navbar text to the right with Bootstrap 4

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 Dan Kreiger
Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Sign up

Sign up with GitHub
Latest added
Best Hibernate Interview Questions
Hibernate Interview Questions
30 Best Hibernate Questions for your next Interview.
Sportido - Find People & Places to Play Any Sport
Algdat oblig 1 hiof
Creating your first Scriptable Brush and Scriptable Tile
Launch.log
hashtag_scraper
Learn COBOL
Learn DevOps
Scriptpower
Powershell
treeview optimization
Dump SSH
DMAwithADC2
ADCwithDMA
Rendering
Receiving a message
Speak example
brenner