Why mr-auto is being used for the ul tag inside navbar? [Solved]

Question

So here the drop-down button contains navbar with items packed inside ul tag ,so here ul tag has mr-auto ,can i know why is it being used here as removing it has no effect ?Ty in advance !

https://code.sololearn.com/WLbQRh999rMj/?ref=app

Answer 1

Abhay This reminds me of the song...

"Domo arrigato... mr-auto" er... or was it "Mr. Roboto"? LOL

Sorry, I couldn't resist.
----

Anyway... mr-auto is essentially applying the following style to <ul />:

margin-right: auto;

This is essentially pushing the right margin of the <ul> block as far to the right as it can.

This results in pushing the <form> block all the way to the right.

Imagine this represents white space:
____

and these represent the direction from the margin:

-> (margin-right: auto;)
<- (margin-left: auto;)
<--> (both margin right and left are auto - center align effect.)

The following could illustrate mr-auto pushing the margin spaces out from the right of <ul>:

<div><ul /> ____-> <form/></div>

Or rather:

[[menu | menu | menu] ____-> [search|btn]]

----

Likewise, this could illustrate ml-auto pushing the margin spaces out from the left of <ul>:

<div><-_____<ul /> <form/></div>

Or rather:

[<-____ [menu | menu | menu] [search|btn]]

Finally, this could illustrate mx-auto pushing the margin spaces out from both left and right sides of <ul> resulting in a center alignment effect:

<div><-__<ul />__-> <form/></div>

Or rather:

[<-__ [menu | menu | menu]__-> [search|btn]]

----

Hopefully this makes some sense.

Answer 2

Ruba Kh ty!
but the search is inside the form ,so how is ul mr-auto tag controlling it!?
I mean it shouldn't have any effect on the search item ,as it is used outside the ul tag but for some reason it is ,to me looks like form classes are controlling the behaviour depending on ul has Mr auto or not ,well bootstrap isn't that easy then!🙄

Answer 3

It is the same in mobile screen but in bigger screen mr-auto making search to the right if you remove it it will be after the other items on the left, since on bigger screens it will expand and all the items will be on one row

Answer 4

David Carroll quite helpful and thks for the laugh😁 ,also thank you so much for taking out time to explain all this , Meanwhile I searched for what they all mean and after playing around for a while I really understand what is happening