Align nav-items to right side in bootstrap-4

Question

I just switched to bootstrap 4 and reworking all my html and scss to work with it and I cant seem to find how to put a group of nav-items on the right side of the navbar  This is my navbar code    lt nav class  navbar navbar-full navbar-dark bg-primary  gt           lt button class  navbar-toggler hidden-md-up  type  button  data-toggle  collapse  data-target   navbarResponsive  aria-controls  navbarResponsive  aria-expanded  false  aria-label  Toggle navigation  gt  lt  button gt           lt    link to  Living Recipe   recipes path sort attribut   popularity   sort order   desc   class   navbar-brand    gt           lt div class  collapse navbar-toggleable-sm  id  navbarResponsive  gt                  lt ul class  nav navbar-nav float-md-left  gt                   lt li class  nav-item  gt                       lt    form tag recipes path   method   gt   get   id   search-form   class   form-inline   do   gt                               lt    text field tag  search  params  search   placeholder   Search Recipes   class   form-control col-md-8    gt                       lt   end   gt                   lt  li gt                   lt li class  nav-item dropdown  gt                       lt a class  nav-link dropdown-toggle  href  http   example com  id  responsiveNavbarDropdown  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt Browse lt  a gt                       lt div class  dropdown-menu  aria-labelledby  responsiveNavbarDropdown  gt                           lt    link to  Popular   recipes path sort attribute   popularity   sort order   desc   class   dropdown-item    gt                           lt    link to  Newest   recipes path sort attribute   created at   sort order   desc   class   dropdown-item    gt                           lt    link to  Most Updated   recipes path sort attribute   most active   sort order   desc   class   dropdown-item    gt                           lt    link to  Most Saved   recipes path sort attribute   save count   sort order   desc   class   dropdown-item    gt                       lt  div gt                   lt  li gt               lt  ul gt               lt ul class  nav navbar-nav float-md-right  gt                   lt   if user signed in    gt                       lt li class  dropdown  gt                           lt a class  nav-link dropdown-toggle  href  http   example com  id  navbarDropdownMenuLink  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt                               lt    current user displayname present     D-ring    current user firstname   gt                           lt  a gt                           lt div class  dropdown-menu  aria-labelledby  responsiveNavbarDropdown  gt                               lt    link to  Profile   user path current user id   class   dropdown-item    gt                               lt    link to  Recipe Box   user saved recipes path current user id   class   dropdown-item    gt                               lt    link to  Add Recipe   new recipe path  class   dropdown-item    gt                               lt    link to  Submitted Recipes   user path current user id   class   dropdown-item    gt                               lt    link to  Sign Out   destroy user session path   method   gt   delete  class   dropdown-item    gt                           lt  div gt                       lt  li gt                   lt   else   gt                       lt li class  nav-item  gt                           lt    link to  Create Account       data     toggle    gt   modal     target    gt    signupModal    class   nav-link    gt                       lt  li gt                       lt li class  nav-item  gt                           lt    link to  Login       data     toggle    gt   modal     target    gt    loginModal    class   nav-link    gt                       lt  li gt                              lt   end   gt               lt  ul gt           lt  div gt       lt  nav gt    And this is the screenshot of what it looks like

User · Answer

In my case  I was looking for a solution that allows one of the navbar items to be right aligned  In order to do this  you must add style  width 100    to the  lt ul class  navbar-nav  gt  and then add the ml-auto class to your navbar item

User · Answer

TL DR  Create another  lt ul class  quot navbar-nav ml-auto quot  gt  for the navbar items you want on the right  ml-auto will pull your navbar-nav to the right where mr-auto will pull it to the left  Tested against Bootstrap v4 5 2  x000D   x000D   lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt     lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 5 2 css bootstrap min css   gt     lt style gt         Stackoverflow preview fix  please ignore         navbar-nav         flex-direction  row                  nav-link         padding-right   5rem  important        padding-left   5rem  important                    Fixes dropdown menus placed on the right side         ml-auto  dropdown-menu         left  auto  important        right  0px           lt  style gt   lt  head gt   lt body gt   lt nav class  navbar navbar-expand-lg navbar-dark bg-primary rounded  gt     lt a class  navbar-brand  href     gt Navbar lt  a gt     lt ul class  navbar-nav mr-auto  gt       lt li class  nav-item active  gt         lt a class  nav-link  gt Left Link 1 lt  a gt       lt  li gt       lt li class  nav-item  gt         lt a class  nav-link  gt Left Link 2 lt  a gt       lt  li gt     lt  ul gt     lt ul class  navbar-nav ml-auto  gt       lt li class  nav-item  gt         lt a class  nav-link  gt Right Link 1 lt  a gt       lt  li gt       lt li class  nav-item dropdown  gt         lt a class  nav-link dropdown-toggle  href     id  navbarDropdown  role  button  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt             Dropdown on Right lt  a gt         lt div class  dropdown-menu  aria-labelledby  navbarDropdown  gt           lt a class  dropdown-item  href     gt Action lt  a gt           lt a class  dropdown-item  href     gt Another action with a lot of text inside of an item lt  a gt         lt  div gt       lt  li gt     lt  ul gt   lt  nav gt   lt script src  https   code jquery com jquery-3 2 1 slim min js  gt  lt  script gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0 js bootstrap min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs popper js 1 12 9 umd popper min js  gt  lt  script gt   lt  body gt   lt  html gt  x000D   x000D   x000D   As you can see additional styling rules have been added to account for some oddities in Stackoverflows preview box  You should be able to safely ignore those rules in your project  As of v4 0 0 this seems to be the official way to do it  EDIT  I modified the Post to include a dropdown placed on the right side of the navbar as suggested by  Bruno  It needs its left and right attributes to be inverted  I added an extra snippet of css to the beginning of the example code  Please note  that the example shows the mobile version when you click the Run code snippet button  To view the desktop version you must click the Expand snippet button   ml-auto  dropdown-menu       left  auto  important      right  0px     Including this in your stylesheet should do the trick

User · Answer

With Bootstrap v4 0 0-alpha 6  Two  lt ul gt s   navbar-na   one with  mr-auto and one with  ml-auto    lt nav     gt                 lt div class  collapse navbar-collapse  gt       lt ul class  navbar-nav mr-auto  gt         lt li class  nav-item active  gt           lt a class  nav-link  href     gt Home  lt span class  sr-only  gt  current  lt  span gt  lt  a gt         lt  li gt         lt li class  nav-item  gt           lt a class  nav-link  href     gt Left Link  lt  a gt         lt  li gt       lt  ul gt       lt ul class  navbar-nav ml-auto  gt         lt li class  nav-item  gt           lt a class  nav-link  href     gt Right Link  lt  a gt         lt  li gt       lt  ul gt     lt  div gt   lt  nav gt

User · Answer

Here and easy Example    lt  -- Navigation bar-- gt    lt nav class  navbar navbar-toggleable-md bg-info navbar-inverse  gt       lt div class  container  gt           lt button class  navbar-toggler  data-toggle  collapse  data-target   mainMenu  gt               lt span class  navbar-toggler-icon  gt  lt  span gt               lt  button gt           lt div class  collapse navbar-collapse  id  mainMenu  gt               lt div class  navbar-nav ml-auto   style  width 100   gt                   lt a class  nav-item nav-link active  href     gt Home lt  a gt                   lt a class  nav-item nav-link  href     gt About lt  a gt                   lt a class  nav-item nav-link  href     gt Training lt  a gt                   lt a class  nav-item nav-link  href     gt Contact lt  a gt               lt  div gt           lt  div gt       lt  div gt   lt  nav gt

User · Answer

I have a working codepen with left- and right-aligned nav links that all collapse into a responsive menu together using  justify-content-between on the parent tag  https   codepen io epan pen bREVVW editors 1000   lt nav class  navbar navbar-toggleable-sm navbar-inverse bg-inverse  gt     lt button class  navbar-toggler navbar-toggler-right  type  button  data-toggle  collapse  data-target   navbar      aria-controls  navbarNavAltMarkup  aria-expanded  false  aria-label  Toggle navigation  gt       lt span class  navbar-toggler-icon  gt  lt  span gt     lt  button gt     lt a class  navbar-brand  href     gt Acme lt  a gt     lt div class  collapse navbar-collapse justify-content-between  id  navbar  gt       lt div class  navbar-nav  gt         lt a class  nav-item nav-link  href     gt Ball Bearings lt  a gt         lt a class  nav-item nav-link  href     gt TNT Boxes lt  a gt       lt  div gt       lt div class  navbar-nav  gt         lt a class  nav-item nav-link  href     gt Logout lt  a gt       lt  div gt     lt  div gt   lt  nav gt

User · Answer

This should work for alpha 6  The key is the class  mr-auto  on the left nav  which will push the right nav to the right  You also need to add navbar-toggleable-md or it will stack in a column instead of a row  Note I didn t add the remaining toggle items  e g  toggle button   I added just enough to get it to formatted as requested  Here are more complete examples https   v4-alpha getbootstrap com examples navbars      lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 css bootstrap min css  rel  stylesheet    gt   lt  head gt   lt body gt       lt nav class  navbar navbar-toggleable-md navbar-light bg-faded  gt           lt div class  container  gt               lt a class  navbar-brand  href     gt Navbar lt  a gt               lt ul class  nav navbar-nav mr-auto  gt                   lt li class  nav-item active  gt                       lt a class  nav-link  href     gt Home lt  a gt                   lt  li gt                   lt li class  nav-item  gt                       lt a class  nav-link  href     gt Link lt  a gt                   lt  li gt                   lt li class  nav-item  gt                       lt a class  nav-link  href     gt Link lt  a gt                   lt  li gt               lt  ul gt               lt ul class  nav navbar-nav  gt                   lt li class  nav-item  gt                       lt a class  nav-link  href     gt Link on the Right lt  a gt                   lt  li gt               lt  ul gt           lt  div gt       lt  nav gt   lt  body gt

User · Answer

In Bootstrap 4 alpha-6 version  As navbar is using flex model  you can use justify-content-end in parent s div and remove mr-auto    lt div class  collapse navbar-collapse justify-content-end  id  navbarText  gt     lt ul class  navbar-nav  gt       lt li class  nav-item active  gt         lt a class  nav-link  href     gt Home  lt span class  sr-only  gt  current  lt  span gt  lt  a gt       lt  li gt       lt li class  nav-item  gt         lt a class  nav-link  href     gt Link lt  a gt       lt  li gt       lt li class  nav-item  gt         lt a class  nav-link disabled  href     gt Disabled lt  a gt       lt  li gt     lt  ul gt   lt  div gt    This works like a charm

User · Answer

In last versions  it is easier  Just put a ml-auto class in the ul like so   lt ul class  quot nav navbar-nav ml-auto quot  gt

[bootstrap-4] Align nav-items to right side in bootstrap-4

Examples related to bootstrap-4

Examples related to navbar

Examples related to nav