Bootstrap 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:

<div> around the <ul> with the atribute: style="float: right"
<div> around the <ul> with the atribute: style="text-align: right"
tried those two things on the <li> tags
tried all those things again with !important added to the end
changed nav-item to nav-right in the <li>
added a pull-sm-right class to the <li>
added a align-content-end class to the <li>

This is my code:

<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">
      <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>

Yes, so what do I have to do to get it to align to the right. I've already tried a couple flexbox things without any luck. :/ — Luuk Wuijster, Jan 06 '17 at 20:12

Carol Skelly · Accepted Answer · 2021-07-14T18:58:11.547

Bootstrap 5 (update 2021)

In Bootstrap 5 (see this question), ml-auto has been replaced with ms-auto to represent start instead of left. Since the Navbar is still based on flexbox, auto margins OR flexbox utility classes are still used to align Navbar content.

For example, use me-auto...

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Brand</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Menu </a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

Bootstrap 5 right align Navbar content

Bootstrap 4 (original answer)

Bootstrap 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.

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <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="#">Pricing</a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Login</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
        </ul>
    </div>
</nav>

https://codeply.com/go/P0G393rzfm

There are also flexbox utils. For example use justify-content-end on the collapse menu:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Download</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Or when you have 2 navbar-navs, use justify-content-between in navbar-collapse would work to even the space between the navbar-navs:

 <div class="navbar-collapse collapse justify-content-between">
     <ul class="navbar-nav mr-auto">
               ..
     </ul>
     <ul class="navbar-nav">
           ..
     </ul>
 </div>

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

`mr-auto` doesn't work if the right-most item is a `dropdown`. The dropdown items spill over the right edge of the page. — Ege Ersoz, May 16 '17 at 17:13
It works: https://www.codeply.com/go/P0G393rzfm - the issue is not `mr-auto` as the question is about aligning right which works. Post a new question if you have concerns with the dropdown, but you're most likely referring to this issue: http://stackoverflow.com/questions/43867258/relocating-bootstrap-4-navigation-dropdown-menu/43868074#43868074 — Carol Skelly, May 16 '17 at 17:20
You can also add `.dropdown-menu-right` to right-aligned dropdowns in the navbar. Not doing so can cut off the dropdown at certain widths. — rybo111, Jan 27 '18 at 22:36
@ZimSystem thank you for your answers. I have been following your answer over here https://stackoverflow.com/questions/19733447/bootstrap-navbar-with-left-center-or-right-aligned-items . I have a question how can I achieve one item to be on the left side and one item on the right side ? — Lokesh Pandey, Apr 06 '18 at 14:32
In http://www.codeply.com/go/P0G393rzfm, you've shown one ul on the left and one ul on the right. That was achieved by adding _mr-auto_ to the first one. But what if I have only one ul? I don't want to create an empty ul just for aligning another one to the right. — Santosh Kumar, May 26 '19 at 03:01
I was needing to pull only one item inside a "nav" element to the right, so adds "ml-auto" to this child item solved my problem. Thanks — Jorge Matricali, May 26 '20 at 00:49
If you want two Navs, with them pushed left and right, justify-content-between worked well for me. — Greg, Mar 06 '21 at 12:56

score 174 · Answer 2 · answered Jan 08 '17 at 01:49

174

In my case, I wanted just one set of navigation buttons / options and found that this will work:

<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Sign Out</a>
    </li>
  </ul>
</div>

So, you will add justify-content-end to the div and omit mr-auto on the list.

Here is a working example.

answered Jan 08 '17 at 01:49

Craig van Tonder

7,497
18
64
109

3

@numediaweb In the OPs example, he uses two elements within the nav, aligning one left and one right; where I used only one and aligned it to the right. It's not the right answer but it's helpful as an answer to a slight variation of the question ;) – Craig van Tonder Jan 25 '17 at 06:34
This works for a single navbar-nav, but the [`mr-auto` method](http://stackoverflow.com/a/41513784/171456) is used in the [Bootstrap docs](http://v4-alpha.getbootstrap.com/components/navbar/). – Carol Skelly Feb 03 '17 at 12:32
`mr-auto` is used in docs, but not to align items to the left. This answer is semantically correct as mentioned in this article: http://blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6/ – qwaz Apr 27 '17 at 15:48
The question is are you trying to align 2 list of links or 1. If just 1, your answer works and was very helpful to me. Thanks! – barefootsanders Sep 15 '17 at 21:22
It worked for me, but I don't know why the one above this answer doesn't work. – Suhail Akhtar Dec 24 '18 at 19:10
`float-right` works the same way as `justify-content-end` , as long as `mr-auto` is removed. – desoga Apr 20 '19 at 23:55

score 78 · Answer 3 · answered Jan 20 '18 at 11:29

78

For those who is still struggling with this issue in BS4 simply try below code -

<ul class="navbar-nav ml-auto">

answered Jan 20 '18 at 11:29

Muhammad Tarique

1,407
1
13
17

7

No - that aligns everything to the right. The question says he only wants to align a single item to the right. – NickG Feb 08 '18 at 17:11
2

Check the official doc about [`m*-auto`](https://getbootstrap.com/docs/4.2/utilities/flex/#auto-margins) it pushes content to the left or right depending on where you put the class – Pierre de LESPINAY Jan 22 '19 at 16:05
@PierredeLESPINAY, yes `ml-auto` does push content to the rightmost position, but I just wondered why `mr-0` cannot do the job? – avocado Feb 02 '20 at 21:18
@NickG if you want some items aligned left and others right, you can just have multiple `
– Addison Klinke May 03 '21 at 03:11

score 52 · Answer 4 · answered Apr 03 '18 at 02:15

52

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

<ul class="navbar-nav ml-auto">

answered Apr 03 '18 at 02:15

geet Sebastian

677
6
12

Any example for this? – e-info128 Dec 02 '21 at 17:05

score 36 · Answer 5 · edited Dec 11 '17 at 23:39

36

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.

edited Dec 11 '17 at 23:39

Mogsdad

44,709
21
151
275

answered Dec 11 '17 at 23:16

ClemC

614
6
14

1

Worked beautifully for me. Nothing else did. – Maria Campbell Sep 14 '18 at 05:05
1

Tried your suggestion of looking up the Bootstrap webpage source itself and, as of this writing (16th Jan, 2021), it's `ms-md-auto`. At least that worked in my case. – navneethc Jan 16 '21 at 18:38

score 19 · Answer 6 · edited Dec 10 '19 at 12:58

19

Use this code to move items to the right.

<div class="collapse navbar-collapse justify-content-end">

edited Dec 10 '19 at 12:58

Jaroslav Bezděk

6,967
6
29
46

answered Mar 02 '18 at 04:33

Maizied Hasan Majumder

1,197
1
12
25

1

that will not work when you have a collapsed Menu, however, with the ml-auto it will still work because when the menu is collapsed, the
items still take 100% of the width so no margin will be applied.

Ryan S

Nov 20 '18 at 05:32

1

For me only this solution worked i am using bootstrap version 4 – Zain Ul Abidin Mar 06 '23 at 09:41

score 14 · Answer 7 · edited Nov 13 '17 at 17:50

14

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

edited Nov 13 '17 at 17:50

Gerry

10,337
3
31
40

answered Oct 29 '17 at 03:22

James Pike

171
1
2
9

score 12 · Answer 8 · edited Dec 10 '19 at 11:39

Just add mr-auto class at ul:

<ul class="nav navbar-nav mr-auto">

If you have menu list in both side you can do something like this:

<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="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
<ul class="navbar-nav ml-auto">
  <li class="nav-item active">
    <a class="nav-link" href="#">left 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">left 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">left disable</a>
  </li>
</ul>

score 8 · Answer 9 · edited Aug 01 '17 at 06:22

8

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 <div> and use .justify-content-between:

<div class="collapse navbar-collapse justify-content-between">
<ul>....</ul>
<ul>...</ul>
</div>

edited Aug 01 '17 at 06:22

Billal Begueradj

20,717
43
112
130

answered Jun 08 '17 at 22:12

John Kennedy

113
1
6

score 8 · Answer 10 · answered Mar 04 '20 at 13:40

8

In bootstrap v4.3 just add ml-auto in <ul class="navbar-nav"> Ex:<ul class="navbar-nav ml-auto">

answered Mar 04 '20 at 13:40

Mohit Prajapati

380
3
8

score 5 · Answer 11 · edited Oct 30 '17 at 17:25

use the flex-row-reverse class

<nav class="navbar navbar-toggleable-md navbar-light">
    <div class="container">
        <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">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">
            <i class="fa fa-hospital-o fa-2x" aria-hidden="true"></i>
        </a>
        <div class="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup">
            <ul class="navbar-nav">
                <li><a class="nav-item nav-link active" href="#" style="background-color:#666">Home <span class="sr-only">(current)</span></a</li>
                <li><a class="nav-item nav-link" href="#">Doctors</a></li>
                <li><a class="nav-item nav-link" href="#">Specialists</a></li>
                <li><a class="nav-item nav-link" href="#">About</a></li>
            </ul>
        </div>
    </div>
</nav>

Anand Raja · Answer 12 · 2019-10-20T15:42:08.873

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <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 w-100">
      <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="#">Pricing</a>
      </li>
      <li class="nav-item dropdown ml-auto">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </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>

score 4 · Answer 13 · answered Nov 04 '19 at 03:39

4

For bootstrap 4.3.1, I was using nav-pills and nothing worked for me except this:

    <ul class="nav nav-pills justify-content-end ml-auto">
    <li ....</li>
    </ul>

answered Nov 04 '19 at 03:39

Ajay Kumar

2,906
3
23
46

score 3 · Answer 14 · answered Apr 18 '21 at 21:37

In my case Bootstrap v5, I wanted just one set of navigation options to the right side:

just add "ms-auto" in ul.

And it helped me.

<div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav ms-auto mb-2 mb-md-0">
      <li class="nav-item">
        <a class="nav-link " aria-current="page" href="index.php">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="services.php" tabindex="-1" aria-disabled="true">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="aboutus.php">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="Portfolio.php">Portfolio</a>
      </li>
    </ul>
    
  </div>

score 3 · Answer 15 · answered May 12 '21 at 17:04

The above answers surprisingly didn't work for me so here is my approach. To align the login and register navigation bar items to the right you can make use of either of these two ways:

pull-right: Modify the unordered list tag for login and register as

<ul class="navbar-nav pull-right">
navbar-right: Modify the unordered list tag for login and register as

<ul class="navbar-nav navbar-right">

score 0 · Answer 16 · answered Aug 11 '17 at 00:50

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.

<div id="header" class="header">
  <nav class="navbar navbar-toggleable-sm navbar-inverse bg-faded fixed-top">
    <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">
    <span class="navbar-toggler-icon"></span>
  </button>
    <a class="navbar-brand" href="#">
          <img alt='Brand' src='../assets/images/logo-white.png' class='navbar-logo-img d-inline-block align-top '>
          <span class="navbar-logo-text">Oncoscape</span>
        </a>
    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class="navbar-nav float-left">
        <a class="navbar-items nav-item nav-link active " *ngIf='authenticated' (click)='goDashboard()'>
          <span class="fa fa-dashboard"></span>Dashboard
        </a>
        <a class="nav-item nav-link navbar-items active" href="http://resources.sttrcancer.org/oncoscape-contact">
          <span class="fa fa-comments"></span>Feedback
        </a>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img *ngIf='user && authenticated'  class="navbar-pic" src={{user.thumbnail}} alt="Smiley face">
          </a>
          <div *ngIf='user && authenticated' class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" (click)="toProfile()">Account</a>
            <div class="dropdown-item">
              <app-login></app-login>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>
<router-outlet></router-outlet>

score 0 · Answer 17 · answered Aug 19 '17 at 21:31

For Bootstrap 4 beta, sample navbar with elements aligned to the right side is:

<div id="app" class="container">
  <nav class="navbar navbar-expand-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>
</div>

score 0 · Answer 18 · answered Oct 23 '17 at 09:06

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

belgoros · Answer 19 · 2017-11-14T09:44:47.080

The working example for BS v4.0.0-beta.2:

<body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <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 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="#">Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
          </li>
        </ul>
      </div>
    </nav>


    <div class="container-fluid">
      container content
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  </body>

score 0 · Answer 20 · answered May 19 '18 at 20:52

0

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.

answered May 19 '18 at 20:52

domdaviesdev

89
1
5

score 0 · Answer 21 · answered Feb 16 '23 at 19:53

but the nav item you want to align to right in alone

put it outside the of main nav but in the same , like that:

<ul class="navbar-nav justify-content-end ms-auto">
   <li class="nav-item">
     <a class="nav-link" href="#" aria-expanded="false">Contact support</a>
   </li>

   <li class="nav-item ">
     <a class="nav-link" href="#" aria-expanded="false">Log in</a>
   </li>
</ul>

use justify-content-end ms-auto

score -1 · Answer 22 · edited Jan 10 '18 at 04:08

-1

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

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

edited Jan 10 '18 at 04:08

user229044

232,980
40
330
338

answered Sep 21 '17 at 08:51

Paul

324
5
13

score -2 · Answer 23 · edited Feb 12 '18 at 11:57

Just copied this from one of the getbootstrap pages for the released version 4 which worked much better than the above

<div class="d-none d-xl-block col-xl-2 bd-toc float-md-right">
    <ul class="section-nav">
         <li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
         <li class="toc-entry toc-h2"><a href="#classes">Classes</a></li>
         <li class="toc-entry toc-h2"><a href="#mixins">Mixins</a></li>
         <li class="toc-entry toc-h2"><a href="#responsive">Responsive</a></li>
    </ul>
</div>

score -3 · Answer 24 · answered Apr 03 '17 at 11:57

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.

.hidden {
  display:none;
  } 
  
 #loginButton{
 
 margin-right:2px;
 
 }

<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top">
  <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">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">NavBar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active hidden">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="loginButton"><a href="#">Log In</a></button>
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><a href="#">Register</a></button>
    </form>
  </div>
</nav>

Bootstrap align navbar items to the right

This is what I have tried so far:

This is my code:

24 Answers24

Linked

Related