11

This is bootstrap 5 navbar ul part code. my problem is:

  1. I can't change ul position left to right.

  2. what the meaning of bootstrap 5 class "me-auto"

    Home
    3. Link Dropdown
  3. Action
  4. Another action
  6. Something else here
    7. Disabled
Zim
  • 329,487
  • 83
  • 671
  • 600
Ritam Rahman
  • 121
  • 1
  • 1
  • 3
  • Does this answer your question? [Align nav items to right in Bootstrap 5](https://stackoverflow.com/questions/65253543/align-nav-items-to-right-in-bootstrap-5) ... `me-auto` is `margin-right: auto` – Zim Feb 03 '21 at 11:53
  • Please [read the Bootstrap docs](https://getbootstrap.com/docs/5.0/utilities/flex/#auto-margins) and [how to ask](https://stackoverflow.com/help/how-to-ask) – Zim Feb 03 '21 at 11:55
  • The confusing thing about the new approach is that `ml-auto` & `mr-auto` are replaced with equivalent `ms-auto` & `me-auto` (which stand for `start` & `end`). If you need to know more about this, search for `css logical properties` and you should find plenty of resources on why they changed these. – Shahroq May 29 '22 at 07:07

7 Answers7

8

Changing .me-auto to .ms-auto shifts it to the right.

Kevin M. Mansour
  • 1,932
  • 5
  • 14
  • 28
Kamal Adebayo
  • 81
  • 1
  • 3
6

mr-auto => bootstrap 4 margin right-auto

me-auto => bootstrap 5 margin end-auto

https://getbootstrap.com/docs/5.0/utilities/spacing/#margin-and-padding

user16146710
  • 61
  • 1
  • 2
2

For ul position left to right use

<ul class="nav justify-content-end">

me-auto meening bootstrap 5 margin end-auto

Md. Shiam Hossain
  • 97
  • 7
0
  1. Without seeing code, we can't help about alignment left to right or you maybe use.

float:right or you can use this CSS:

.lefttoright {
  position: relative;
  right: 5px;
}
  1. me-auto pushing two items to the right.
Kevin M. Mansour
  • 1,932
  • 5
  • 14
  • 28
Wajid
  • 579
  • 2
  • 11
0

You can use mr-auto and ml-auto for right and left alignment respectively in Bootstrap 5.

class="navbar-nav mr-auto mb-2 mb-lg-0"
Kevin M. Mansour
  • 1,932
  • 5
  • 14
  • 28
Hammad Khan
  • 1
0
.me-auto {
  margin-right: auto !important;
}

The code above reveals the CSS rule using Firefox's Developer Tools inspection method.

Robert Kluver
  • 39
  • 3
0

me-auto means "margin end auto". Which is actually:

margin-right: auto

me = margin-right and ms = margin-left

To verify my answer you can download the bootstrap 5.0 here: https://getbootstrap.com/docs/5.0/getting-started/download/

Open css/bootstrap.css file and then search for this className(me-auto) and you will find its css code there.

MOHSIN SHAHZAD
  • 18
  • 5