ml-auto is not pushing navbar links to the right

Question

I'm using reactstrap and have been following this link:

https://reactstrap.github.io/components/navbar/

In the example, the <nav className='ml-auto' navbar> is pushing the <NavItem> to the right. However, what I am trying to implement (which is really similar to the example) the <NavItem> is rendering right next to the <NavbarBrand>.

I've checked the syntax like 100 times and it looks correct. The custom CSS I have, which is very little, does not seem to be overriding anything. The CSS in the console looks pretty similar and it appears to be affected by the:

.ml-auto, .mx-auto {
    margin-left: auto!important;
}

At least toggling it off in the console in the example, moves the <NavItem> right next to the <NavbarBrand> like it is in my app (which I don't want). Here is what I am looking at:

Reactstrap Example (correct spacing):

Console for my app (incorrect spacing):

How do I get the spacing right in my app?

It really isn't clear to me what is affecting margin-left: auto !important to work in one and not the other.

unwrap the `navbar-toggler` and `.navbar-collapse` from `div`....its look like you are using extra `div` just after `navbar-brand`... — Bhuwan, Feb 28 '18 at 06:42

score 156 · Answer 1 · answered Jan 04 '21 at 11:50

156

For Bootstrap-5 we have to use ms-auto instead of ml-auto

answered Jan 04 '21 at 11:50

Nithin Kumar

1,561
1
4
2

9

THIS DESERVES MORE CREDIT SERIOUSLY. Under react's bootstrap page, there is NOOOO mention whatsoever of ms-auto. ml-auto was all it gave me as well as every other single post here. damn dude you're a legend. – darthgamer64 May 05 '21 at 22:31
2

This worked for me. I'm using react-bootstrap and installed bootstrap using `yarn add bootstrap` which installed the latest v5.0. Reinstalled bootstrap (`yarn add bootstrap@4.6.0`) and is working fine now. – Kevin Aung May 09 '21 at 22:16
2

should be the accepted answer if using bootstrap 5 – Ritesh Kumar Jul 11 '21 at 11:03

score 26 · Answer 2 · answered May 20 '21 at 08:39

Starting from Bootstrap 5 2021, There are some changes in the side names of spacing utilities.

Margin Left is now called Margin Start, therefore use ms instead of ml
Example: For setting margin-left to auto : use ms-auto
Similarly for setting margin left to 3 : use ms-3 instead of ml-3

You can learn more about the new side names for margins and paddings in the official bootstrap documentation BootStrap Spacing Utilities

WebDevBooster · Accepted Answer · 2018-02-28T07:36:04.903

The navbar components (and many other components) will only work if you use them the way they've been designed to be used.

For example, ml-auto works on sibling elements.

It does NOT work if you destroy that sibling relationship.

In other words, you cannot just randomly wrap elements in unnecessary divs.

Remove the div you put around the navbar-toggler and the collapse component to make the sibling selector work as intended.

Also: Do NOT use the !important flag as a permanent solution in any of your custom css. That flag is for quick testing only.

P.S. You seem to have a habit of wrapping things in unnecessary divs. The container is also wrapped in such a useless div. Don't add unnecessary code for some sort of "esthetics". Only add code if it actually does something and use comments for everything else.

!important is added by Bootstrap. They did not make those CSS rules. — ScottMichaud, Jun 18 '21 at 13:59

Carol Skelly · Answer 4 · 2018-02-28T12:23:30.073

Explanation on how ml-auto works.

It appears this was already resolved in the comments. I just wanted to add an explanation that ml-auto was not working because it's flexbox parent needs to be full-width of the navbar. So, it could have also been solved by adding w-100 to the extra div..

<nav class="navbar navbar-expand-md navbar-light bg-faded">
     <a class="navbar-brand" href="#">reactstrap</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="navbar-toggler-icon"></span>
     </button>
     <div class="w-100">
        <div class="navbar-collapse collapse">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                ...
            </ul>
        </div>
     </div>
 </nav>

ml-auto works because of the way the flexbox parent "shrinks" the child block element(s) by default. It has nothing to do with sibling elements, and would work fine with just one child in the flexbox parent: https://www.codeply.com/go/xPaoNJMzbG

Here's a good article on how auto-margins work with flexbox

I tried added w-100 to the parent element (row in my case) and it made no difference. When I used ml-auto the buttons still aren't right aligning. However, adding the class text-right worked and the buttons right align properly. — dcp, Jan 14 '21 at 23:07

score 4 · Answer 5 · answered Feb 20 '21 at 07:35

4

In Bootstrap-5 there are some changes, earlier it was ml-auto for margin-left:auto which is now changed to ms-auto, similarly mr-auto is changed to me-auto. However for top and bottom it is same as earlier versions of bootstrap i.e versions before bootstrap-5

for more details visit docs

answered Feb 20 '21 at 07:35

soraku02

282
3
11

1

Yes, this answer is correct if you are using Bootstrap version 5 – Pawara Siriwardhane May 06 '21 at 17:03

score 4 · Answer 6 · answered May 07 '21 at 19:58

I am using bootstrap@5.0.X If you are stuck with this problem in 2021, It is because there has been migration and changes in the class name.

.ml-* and .mr-* to .ms-* and .me-*.

similarly many others class name has been changed.

Link to check migration

Bootstrap Migration link

ml-auto is not pushing navbar links to the right

6 Answers6

Linked