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:

<nav class="navbar navbar-full navbar-dark bg-primary">
        <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"></button>
        <%= link_to "Living Recipe", recipes_path(sort_attribut: "popularity", sort_order: :desc), class: "navbar-brand" %>
        <div class="collapse navbar-toggleable-sm" id="navbarResponsive">   
            <ul class="nav navbar-nav float-md-left">
                <li class="nav-item">
                    <%= form_tag(recipes_path, :method => "get", id: "search-form", class: "form-inline") do %>
                            <%= text_field_tag :search, params[:search], placeholder: "Search Recipes", class: "form-control col-md-8" %>
                    <% end %>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Browse</a>
                    <div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
                        <%= link_to "Popular", recipes_path(sort_attribute: "popularity", sort_order: :desc), class: "dropdown-item" %>
                        <%= link_to "Newest", recipes_path(sort_attribute: "created_at", sort_order: :desc), class: "dropdown-item" %>
                        <%= link_to "Most Updated", recipes_path(sort_attribute: "most_active", sort_order: :desc), class: "dropdown-item" %>
                        <%= link_to "Most Saved", recipes_path(sort_attribute: "save_count", sort_order: :desc), class: "dropdown-item" %>
                    </div>
                </li>
            </ul>
            <ul class="nav navbar-nav float-md-right">
                <% if user_signed_in? %>
                    <li class="dropdown">
                        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <%= current_user.displayname.present? ? "D-ring" : current_user.firstname %>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
                            <%= link_to "Profile", user_path(current_user.id), class: "dropdown-item" %>
                            <%= link_to "Recipe Box", user_saved_recipes_path(current_user.id), class: "dropdown-item" %>
                            <%= link_to "Add Recipe", new_recipe_path, class: "dropdown-item" %>
                            <%= link_to "Submitted Recipes", user_path(current_user.id), class: "dropdown-item" %>
                            <%= link_to "Sign Out", destroy_user_session_path, :method => :delete, class: "dropdown-item" %>
                        </div>
                    </li>
                <% else %>
                    <li class="nav-item">
                        <%= link_to "Create Account", '', data: {:'toggle' => 'modal', :'target' => '#signupModal'}, class: "nav-link" %>
                    </li>
                    <li class="nav-item">
                        <%= link_to "Login", '', data: {:'toggle' => 'modal', :'target' => '#loginModal'}, class: "nav-link" %>
                    </li>           
                <% end %>
            </ul>
        </div>
    </nav>

And this is the screenshot of what it looks like

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

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

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

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

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

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

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

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

<nav class="navbar navbar-toggleable-sm navbar-inverse bg-inverse">
  <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">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Acme</a>
  <div class="collapse navbar-collapse justify-content-between" id="navbar">
    <div class="navbar-nav">
      <a class="nav-item nav-link" href="#">Ball Bearings</a>
      <a class="nav-item nav-link" href="#">TNT Boxes</a>
    </div>
    <div class="navbar-nav">
      <a class="nav-item nav-link" href="#">Logout</a>
    </div>
  </div>
</nav>

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

The answer is

Examples related to bootstrap-4

Examples related to navbar

Examples related to nav

Tags