Bootstrap 4 align navbar items to the right

Question

How do I align a navbar item to right   I want to have the login and register to the right  But everything I try does not seem to work      This is what I have tried so far     lt div gt  around the  lt ul gt  with the atribute  style  float  right   lt div gt  around the  lt ul gt  with the atribute  style  text-align  right  tried those two things on the  lt li gt  tags tried all those things again with  important added to the end changed nav-item to nav-right in the  lt li gt  added a pull-sm-right class to the  lt li gt  added a align-content-end class to the  lt li gt    This is my code    lt div id  app  class  container  gt     lt nav class  navbar navbar-toggleable-md navbar-light bg-faded  gt       lt button class  navbar-toggler navbar-toggler-right  type  button  data-toggle  collapse  data-target   navbarNavDropdown  aria-controls  navbarNavDropdown  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 Navbar lt  a 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 Features lt  a gt         lt  li gt         lt li class  nav-item  gt           lt a class  nav-link  href     gt Pricingg lt  a gt         lt  li gt       lt  ul gt       lt ul class  navbar-nav    gt         lt li  class  nav-item  gt           lt a class  nav-link  href     url   login       gt Login lt  a gt         lt  li gt         lt li  class  nav-item  gt           lt a class  nav-link  href     url   register       gt Register lt  a gt         lt  li gt       lt  ul gt     lt  nav gt     yield  content    lt  div gt

User · Answer

Find the 69 line in the verndor-prefixes.less and write it following:

_x000D_

.panel {_x000D_
    margin-bottom: 20px;_x000D_
    height: 100px;_x000D_
    background-color: #fff;_x000D_
    border: 1px solid transparent;_x000D_
    border-radius: 4px;_x000D_
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);_x000D_
    box-shadow: 0 1px 1px rgba(0,0,0,.05);_x000D_
}

_x000D_

User · Answer

If all above fails  I added 100  width to the navbar class in CSS   Until then mr auto wasn t working for me on this project using 4 1

User · Answer

Just add mr-auto class at ul    lt ul class  nav navbar-nav mr-auto  gt    If you have menu list in both side you can do something like this    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 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 ul class  navbar-nav ml-auto  gt     lt li class  nav-item active  gt       lt a class  nav-link  href     gt left 1 lt  a gt     lt  li gt     lt li class  nav-item  gt       lt a class  nav-link  href     gt left 2 lt  a gt     lt  li gt     lt li class  nav-item  gt       lt a class  nav-link disabled  href     gt left disable lt  a gt     lt  li gt   lt  ul gt

User · Answer

Bootstrap 4 has many different ways to align navbar items  float-right won t work because the navbar is now flexbox  You can use mr-auto for auto right margin on the 1st  left  navbar-nav  Alternatively  ml-auto could be used on the 2nd  right  navbar-nav   or if you just have a single navbar-nav   lt nav class  quot navbar navbar-expand-md navbar-light bg-light quot  gt       lt a class  quot navbar-brand quot  href  quot   quot  gt Navbar lt  a gt       lt button class  quot navbar-toggler quot  type  quot button quot  data-toggle  quot collapse quot  data-target  quot  navbarNav quot  gt           lt span class  quot navbar-toggler-icon quot  gt  lt  span gt       lt  button gt       lt div class  quot collapse navbar-collapse quot  id  quot navbarNav quot  gt           lt ul class  quot navbar-nav mr-auto quot  gt               lt li class  quot nav-item active quot  gt                   lt a class  quot nav-link quot  href  quot   quot  gt Home  lt span class  quot sr-only quot  gt  current  lt  span gt  lt  a gt               lt  li gt               lt li class  quot nav-item quot  gt                   lt a class  quot nav-link quot  href  quot   quot  gt Features lt  a gt               lt  li gt               lt li class  quot nav-item quot  gt                   lt a class  quot nav-link quot  href  quot   quot  gt Pricing lt  a gt               lt  li gt           lt  ul gt           lt ul class  quot navbar-nav quot  gt               lt li class  quot nav-item quot  gt                   lt a class  quot nav-link quot  href  quot   quot  gt Login lt  a gt               lt  li gt               lt li class  quot nav-item quot  gt                   lt a class  quot nav-link quot  href  quot   quot  gt Register lt  a gt               lt  li gt           lt  ul gt       lt  div gt   lt  nav gt   https   codeply com go P0G393rzfm There are also flexbox utils  For example use justify-content-end on the collapse menu   lt nav class  quot navbar navbar-expand-lg navbar-dark bg-dark quot  gt     lt div class  quot container-fluid quot  gt       lt a class  quot navbar-brand quot  href  quot   quot  gt Brand lt  a gt       lt button class  quot navbar-toggler quot  type  quot button quot  data-bs-toggle  quot collapse quot  data-bs-target  quot  navbarNav quot  gt         lt span class  quot navbar-toggler-icon quot  gt  lt  span gt       lt  button gt       lt div class  quot collapse navbar-collapse justify-content-end quot  id  quot navbarNav quot  gt         lt ul class  quot navbar-nav quot  gt           lt li class  quot nav-item quot  gt             lt a class  quot nav-link active quot  aria-current  quot page quot  href  quot   quot  gt Contact lt  a gt           lt  li gt           lt li class  quot nav-item quot  gt             lt a class  quot nav-link quot  href  quot   quot  gt Pricing lt  a gt           lt  li gt           lt li class  quot nav-item quot  gt             lt a class  quot nav-link quot  href  quot   quot  gt Download lt  a gt           lt  li gt         lt  ul gt       lt  div gt     lt  div gt   lt  nav gt   Or when you have 2 navbar-navs  use justify-content-between in navbar-collapse would work to even the space between the navbar-navs    lt div class  quot navbar-collapse collapse justify-content-between quot  gt        lt ul class  quot navbar-nav mr-auto quot  gt                          lt  ul gt        lt ul class  quot navbar-nav quot  gt                      lt  ul gt    lt  div gt    Update for Bootstrap 4 0 and newer As of Bootstrap 4 beta  ml-auto will still work to push items to the right  Just be aware the the navbar-toggleable- classes have changed to navbar-expand-  Updated navbar right for Bootstrap 4  Another frequent Bootstrap 4 Navbar right alignment scenario includes a button on the right that remains outside the mobile collapse nav so that it is always shown at all widths  Right align button that is always visible   Related  Bootstrap NavBar with left  center or right aligned items  Update for Bootstrap 5  see this question   ml-auto has been replaced with ms-auto to represent start instead of left

User · Answer

Using the bootstrap flex box helps us to control the placement and alignment of your navigation element. for the problem above adding mr-auto is a better solution to it .

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" 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>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav  " >
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
  @yield('content')
</div>

other placement may include

fixed- top
    fixed bottom
    sticky-top

User · Answer

It s little change in boostrap 4  To align navbar to right side  you ve to make only two changes  they are    in navbar-nav class add w-100 as navbar-nav w-100 to make width as 100 in nav-item dropdown class add ml-auto as nav-item dropdown ml-auto to make margin left as auto    If you didn t understand  please refer the image that i ve attached to this   CodePen Link    Full source code   lt nav class  navbar navbar-expand-lg navbar-light bg-light  gt     lt a class  navbar-brand  href     gt Navbar lt  a gt     lt button class  navbar-toggler  type  button  data-toggle  collapse  data-target   navbarNavDropdown  aria-controls  navbarNavDropdown  aria-expanded  false  aria-label  Toggle navigation  gt       lt span class  navbar-toggler-icon  gt  lt  span gt     lt  button gt     lt div class  collapse navbar-collapse  id  navbarNavDropdown  gt       lt ul class  navbar-nav w-100  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 Features lt  a gt         lt  li gt         lt li class  nav-item  gt           lt a class  nav-link  href     gt Pricing lt  a gt         lt  li gt         lt li class  nav-item dropdown ml-auto  gt           lt a class  nav-link dropdown-toggle  href     id  navbarDropdownMenuLink  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt            Dropdown link          lt  a gt           lt div class  dropdown-menu  aria-labelledby  navbarDropdownMenuLink  gt             lt a class  dropdown-item  href     gt Action lt  a gt             lt a class  dropdown-item  href     gt Another action lt  a gt             lt a class  dropdown-item  href     gt Something else here lt  a gt           lt  div gt         lt  li gt       lt  ul gt       lt  div gt   lt  nav gt

User · Answer

I am running Angular 4  v 4 0 0  and ng-bootstrap  Bootstrap 4   This code won t all be relevant but hoping people can pick and choose what works  It took me sometime to find a solution to get my items to justify right  collapse properly and to implement a dropdown off my google  using OAuth  profile picture     lt div id  header  class  header  gt     lt nav class  navbar navbar-toggleable-sm navbar-inverse bg-faded fixed-top  gt       lt button class  navbar-toggler navbar-toggler-right  type  button  data-toggle  collapse  data-target   navbarSupportedContent        aria-controls  navbarSupportedContent  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             lt img alt  Brand  src     assets images logo-white png  class  navbar-logo-img d-inline-block align-top   gt             lt span class  navbar-logo-text  gt Oncoscape lt  span gt           lt  a gt       lt div class  collapse navbar-collapse justify-content-end  id  navbarSupportedContent  gt         lt ul class  navbar-nav float-left  gt           lt a class  navbar-items nav-item nav-link active    ngIf  authenticated   click   goDashboard    gt             lt span class  fa fa-dashboard  gt  lt  span gt Dashboard          lt  a gt           lt a class  nav-item nav-link navbar-items active  href  http   resources sttrcancer org oncoscape-contact  gt             lt span class  fa fa-comments  gt  lt  span gt Feedback          lt  a gt           lt li class  nav-item dropdown  gt             lt a class  nav-link dropdown-toggle  id  navbarDropdownMenuLink  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt               lt img  ngIf  user  amp  amp  authenticated   class  navbar-pic  src   user thumbnail   alt  Smiley face  gt             lt  a gt             lt div  ngIf  user  amp  amp  authenticated  class  dropdown-menu   aria-labelledby  navbarDropdownMenuLink  gt               lt a class  dropdown-item   click   toProfile    gt Account lt  a gt               lt div class  dropdown-item  gt                 lt app-login gt  lt  app-login gt               lt  div gt             lt  div gt           lt  li gt         lt  ul gt       lt  div gt     lt  nav gt   lt  div gt   lt router-outlet gt  lt  router-outlet gt

User · Answer

The working example for BS v4 0 0-beta 2    lt body gt       lt nav class  navbar navbar-expand-md navbar-dark bg-dark  gt         lt a class  navbar-brand  href     gt Navbar lt  a gt         lt button class  navbar-toggler  type  button  data-toggle  collapse  data-target   navbarNavDropdown  aria-controls  navbarNavDropdown  aria-expanded  false  aria-label  Toggle navigation  gt           lt span class  navbar-toggler-icon  gt  lt  span gt         lt  button gt          lt div class  collapse navbar-collapse  id  navbarNavDropdown  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 Features lt  a gt             lt  li gt             lt li class  nav-item  gt               lt a class  nav-link  href     gt Pricingg lt  a gt             lt  li gt           lt  ul gt           lt ul class  navbar-nav  gt             lt li class  nav-item  gt               lt a class  nav-link  href     gt Login lt  a gt             lt  li gt             lt li class  nav-item  gt               lt a class  nav-link  href     gt Register lt  a gt             lt  li gt           lt  ul gt         lt  div gt       lt  nav gt         lt div class  container-fluid  gt        container content      lt  div gt        lt  -- Optional JavaScript -- gt       lt  -- jQuery first  then Popper js  then Bootstrap JS -- gt       lt script src  node modules jquery dist jquery slim min js  gt  lt  script gt       lt script src  node modules popper js dist umd popper min js  gt  lt  script gt       lt script src  node modules bootstrap dist js bootstrap min js  gt  lt  script gt     lt  body gt

User · Answer

In bootstrap v4 3 just add ml-auto in  lt ul class  navbar-nav  gt  Ex  lt ul class  navbar-nav ml-auto  gt

User · Answer

Use ml-auto instead of mr-auto after applying nav justify-content-end to the ul

User · Answer

On Bootsrap 4 0 0-beta 2  none of the answers listed here worked for me  Finally  the Bootstrap site gave me the solution  not via its doc but via its page source code     Getbootstrap com align their right navbar-nav to the right with the help of the following class  ml-md-auto

User · Answer

For those who is still struggling with this issue in BS4 simply try below code -    lt ul class  navbar-nav ml-auto  gt

User · Answer

use the flex-row-reverse class   lt nav class  navbar navbar-toggleable-md navbar-light  gt       lt div class  container  gt           lt button class  navbar-toggler navbar-toggler-right  type  button  data-toggle  collapse  data-target   navbarNavAltMarkup  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               lt i class  fa fa-hospital-o fa-2x  aria-hidden  true  gt  lt  i gt           lt  a gt           lt div class  collapse navbar-collapse flex-row-reverse  id  navbarNavAltMarkup  gt               lt ul class  navbar-nav  gt                   lt li gt  lt a class  nav-item nav-link active  href     style  background-color  666  gt Home  lt span class  sr-only  gt  current  lt  span gt  lt  a lt  li gt                   lt li gt  lt a class  nav-item nav-link  href     gt Doctors lt  a gt  lt  li gt                   lt li gt  lt a class  nav-item nav-link  href     gt Specialists lt  a gt  lt  li gt                   lt li gt  lt a class  nav-item nav-link  href     gt About lt  a gt  lt  li gt               lt  ul gt           lt  div gt       lt  div gt   lt  nav gt

User · Answer

If you want Home  Features and Pricing on left immediately after your nav-brand  and then login and register on right then wrap the two lists in  lt div gt  and use  justify-content-between    lt div class  collapse navbar-collapse justify-content-between  gt   lt ul gt      lt  ul gt   lt ul gt     lt  ul gt   lt  div gt

User · Answer

In my case  I wanted just one set of navigation buttons   options and found that this will work    lt div class  collapse navbar-collapse justify-content-end  id  navbarCollapse  gt     lt ul class  navbar-nav  gt       lt li class  nav-item  gt         lt a class  nav-link  href     gt Sign Out lt  a gt       lt  li gt     lt  ul gt   lt  div gt    So  you will add justify-content-end to the div and omit mr-auto on the list   Here is a working example

User · Answer

On Bootstrap 4  If you want to align brand to your left and all the navbar-items to right  change the default mr-auto to ml-auto   lt ul class  navbar-nav ml-auto  gt

User · Answer

For Bootstrap 4 beta  sample navbar with elements aligned to the right side is    lt div id  app  class  container  gt     lt nav class  navbar navbar-expand-md navbar-light bg-faded  gt       lt button class  navbar-toggler navbar-toggler-right  type  button  data-toggle  collapse  data-target   navbarNavDropdown  aria-controls  navbarNavDropdown  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 Navbar lt  a 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 Features lt  a gt         lt  li gt         lt li class  nav-item  gt           lt a class  nav-link  href     gt Pricingg lt  a gt         lt  li gt       lt  ul gt       lt ul class  navbar-nav  gt         lt li class  nav-item  gt           lt a class  nav-link  href     url   login       gt Login lt  a gt         lt  li gt         lt li class  nav-item  gt           lt a class  nav-link  href     url   register       gt Register lt  a gt         lt  li gt       lt  ul gt     lt  nav gt   lt  div gt

User · Answer

For bootstrap 4 3 1  I was using nav-pills and nothing worked for me except this        lt ul class  nav nav-pills justify-content-end ml-auto  gt       lt li      lt  li gt       lt  ul gt

User · Answer

Use this code to move items to the right    lt div class  collapse navbar-collapse justify-content-end  gt

User · Answer

Just copied this from one of the getbootstrap pages for the released version 4 which worked much better than the above   lt div class  d-none d-xl-block col-xl-2 bd-toc float-md-right  gt       lt ul class  section-nav  gt            lt li class  toc-entry toc-h2  gt  lt a href   overview  gt Overview lt  a gt  lt  li gt            lt li class  toc-entry toc-h2  gt  lt a href   classes  gt Classes lt  a gt  lt  li gt            lt li class  toc-entry toc-h2  gt  lt a href   mixins  gt Mixins lt  a gt  lt  li gt            lt li class  toc-entry toc-h2  gt  lt a href   responsive  gt Responsive lt  a gt  lt  li gt       lt  ul gt   lt  div gt

User · Answer

I m new to stack overflow and new to front end development  This is what worked for me  So I did not want list items to be displayed    x000D   x000D   hidden   x000D    display none  x000D       x000D     x000D    loginButton  x000D    x000D   margin-right 2px  x000D    x000D     x000D   lt nav class  navbar navbar-toggleable-md navbar-light bg-faded fixed-top  gt  x000D     lt button class  navbar-toggler navbar-toggler-right  type  button  data-toggle  collapse  data-target   navbarSupportedContent  aria-controls  navbarSupportedContent  aria-expanded  false  aria-label  Toggle navigation  gt  x000D       lt span class  navbar-toggler-icon  gt  lt  span gt  x000D     lt  button gt  x000D     lt a class  navbar-brand  href     gt NavBar lt  a gt  x000D   x000D     lt div class  collapse navbar-collapse  id  navbarSupportedContent  gt  x000D       lt ul class  navbar-nav mr-auto  gt  x000D         lt li class  nav-item active hidden  gt  x000D           lt a class  nav-link  href     gt Home  lt span class  sr-only  gt  current  lt  span gt  lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item hidden  gt  x000D           lt a class  nav-link  href     gt Link lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item hidden  gt  x000D           lt a class  nav-link disabled  href     gt Disabled lt  a gt  x000D         lt  li gt  x000D       lt  ul gt  x000D       lt form class  form-inline my-2 my-lg-0  gt  x000D         lt button class  btn btn-outline-success my-2 my-sm-0  type  submit  id  loginButton  gt  lt a href     gt Log In lt  a gt  lt  button gt  x000D         lt button class  btn btn-outline-success my-2 my-sm-0  type  submit  gt  lt a href     gt Register lt  a gt  lt  button gt  x000D       lt  form gt  x000D     lt  div gt  x000D   lt  nav gt  x000D   x000D   x000D

[css] Bootstrap 4 align navbar items to the right

This is what I have tried so far:

This is my code:

The answer is

Examples related to css

Examples related to twitter-bootstrap

Examples related to flexbox

Examples related to bootstrap-4

Examples related to navbar

Tags