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.

Answer 1

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

Answer 2

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