Bootstrap 5 navbar align items right

Question

How do you align Bootstrap 5 navbar items to the right? In Bootstrap 3 it's navbar-right. In Bootstrap 4 it's ml-auto. But not work for Bootstrap 5.

Carol Skelly · Answer 1 · 2022-04-15T11:08:45.860

Bootstrap 5 (update 2021)

As of Bootstrap 5 beta, left and right have been replaced by start and end for RTL support. Therefore the margin utilities changed for Bootstrap 5 beta:

ml-auto => ms-auto (start)
mr-auto => me-auto (end)

Also note, all uses of left and right have been replaced with start and end in Bootstrap 5...

ml-* => ms-*
pl-* => ps-*
mr-* => me-*
pr-* => pe-*
text-left => text-start
text-right=> text-end
float-left => float-start
float-right=> float-end
border-left => border-start
border-right=> border-end
rounded-left => rounded-start
rounded-right=> rounded-end
dropleft => dropstart
dropright=> dropend
dropdown-menu-left => dropdown-menu-start
dropdown-menu-right => dropdown-menu-end
carousel-item-left => carousel-item-start
carousel-item-right=> carousel-item-end

Bootstrap 5 alpha (original answer)

This question was asked for Bootstrap 5 alpha, and therefore ml-auto should still work.

How to align nav items to the right in Bootstrap 5?

perfect for me - head div for nav-items had to have ms-auto to flex to the end. Lifesaver! God bless you — Kola Ayanwale, Jun 29 '22 at 09:30
This is very helpful as an upgrade guide from Bootstrap 4 to Bootstrap 5. A person can just do a site-wide find-replace on all these — Sean McCarthy, Sep 29 '22 at 15:14

score 127 · Answer 2 · edited Nov 26 '22 at 20:00

127

I changed mr-auto to ms-auto and it worked for me, this is the best solution.

<ul class="navbar-nav ms-auto mb-2 mb-lg-0">

edited Nov 26 '22 at 20:00

isapir

21,295
13
115
116

answered Dec 18 '20 at 23:17

U.Aasd

1,396
1
8
11

3

I'm confused, ms-auto means align to the start (left) but it actually aligns items to the right in my case.... I think I'm taking crazy pills. – Francisco Mar 18 '22 at 04:24
2

@Francisco When in doubt, look under the hood. `ms-auto` yes means "margin _start_/left auto", but that means "add `margin-left: auto !important;`" which itself is confusing but you can read more about margins here https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left#syntax – Andrew E May 08 '22 at 02:24
Worked for me. Agreed, it doesn't make a lot of sense, I just need it to work. – Harlin Jul 29 '23 at 13:28

score 31 · Answer 3 · answered Dec 23 '20 at 11:13

You need to use ms-auto instead of ml-auto in bootstrap 5.

Horizontal direction sensitive variables, utilities and mixins are renamed with more logical names — start and end in lieu of left and right in Bootstrap 5.

Renamed .left-* and .right-* to .start-* and .end-*.
Renamed .float-left and .float-right to .float-start and .float-end.
Renamed .border-left and .border-right to .border-start and .border-end.
Renamed .rounded-left and .rounded-right to .rounded-start and .rounded-end.
Renamed .ml-* and .mr-* to .ms-* and .me-*.
Renamed .pl-* and .pr-* to .ps-* and .pe-*.
Renamed .text-left and .text-right to .text-start and .text-end.

You can see more bootstrap 5 migration details here: https://getbootstrap.com/docs/5.0/migration/#sass

score 17 · Answer 4 · edited Feb 02 '22 at 21:43

17

The justify-content-end class makes the difference.

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

edited Feb 02 '22 at 21:43

isherwood

58,414
16
114
157

answered Nov 26 '21 at 13:15

ozeray

2,134
2
18
13

This is simple and effective. – Sabel Aug 17 '22 at 14:40
Why only this solution with navbar worked on 5.0.3 alpha? – Bogdan Mind Feb 24 '23 at 11:25

score 9 · Answer 5 · answered May 03 '21 at 13:06

This question is already answered here

For more clarification, as per Bootstrap 5 documentation, some utilities are renamed. including left and right.

left ==> start

right ==> end

therefore

ml has changed to ms

mr has changed to me

so right now:

ml-auto ==> ms-auto

mr-auto ==> me-auto

you can see this here in bootstrap documentation

Therefore, if you want your navbar items to be aligned "right", you have to put:

 <div class="collapse navbar-collapse" id="navbarScroll">
  <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
</div>

Ahmad Dalao · Answer 6 · 2020-12-29T08:21:59.190

It is the same as Bootstrap 4 you should use ml-auto. Here is a snippet from. Navbar Bootstrap 5 offical And here is the official home page for Bootstrap 5

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">



<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" 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>
    <div class="collapse navbar-collapse " id="navbarNavAltMarkup">
      <!-- ml-auto still works just fine-->
      <div class="navbar-nav ml-auto">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </div>
    </div>
  </div>
</nav>


<!--bootstrap 5 -->
<!-- JavaScript and dependencies -->
<script src=" https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js " integrity=" sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo " crossorigin=" anonymous "></script>
<script src=" https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js " integrity=" sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/ " crossorigin=" anonymous "></script>

Edit

The question was asked when bootstrap 5 was in alpha. But right now we have beta out and they did change the naming to be margin-start and margin-end

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

Renamed .pl-* and .pr-* to.ps-* and .pe-*

So the answer should be like this:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">



<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>


<!--bootstrap 5 -->
<!-- JavaScript and dependencies -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

It does not. Please check https://getbootstrap.com/docs/5.0/migration/#utilities — abyshukla, Dec 29 '20 at 06:54
Ok, I changed the answer I answered this question when bootstrap was in alpha. I did update the answer to the new version. Thanks. — Ahmad Dalao, Dec 29 '20 at 08:22

score 4 · Answer 7 · answered Jun 02 '22 at 12:05

4

This one worked fine for me,

check this out :

<ul class="navbar-nav ms-auto mb-2 mb-lg-0">

answered Jun 02 '22 at 12:05

gilzonme

150
1
7

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 02 '22 at 22:06

score 2 · Answer 8 · answered Dec 25 '20 at 03:13

2

Replace mr-auto with ms-auto

This worked for me, hope it helps you :)

answered Dec 25 '20 at 03:13

Okhellohey

45
2
9

1

Hello and welcome to SO! Please read the [tour](https://stackoverflow.com/tour), and [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) For example you can elaborate what such change will do. – Tomer Shetah Dec 25 '20 at 08:54
1

I think you are wrong. mr-auto should be replaced by me-auto. r(right) got replaced by e(end) and l(left) got replaced by s(start). – Irfan wani May 21 '21 at 08:52

score 2 · Answer 9 · edited Feb 13 '21 at 17:41

I gave my <div class="collapse navbar-collapse" id="navLinks"> an #id. then in css, I used the id to #navLinks {justify-content:flex-end;}. Workred fine. Just run the code and do full page.

body {
    background: #f5d9d5;
}

#navLinks { 
    justify-content: flex-end;
}

#home, #about, #portfolio, #testimonials {
    margin: 2em 1em 0 1em;
    font-size: large;
}

#brand_name {
    font-size: 1.75em;
    font-weight: 500;
    padding-top: 4vh;
}

#bavbar-button {
    align-items: flex-end;
}

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    
        <!--Custom CSS-->
    <link rel="stylesheet" href="KT.css">

    <title>My_portofolio_home</title>
</head>
 
<body>

    <header>

        <!--navbar as a link-->
        <nav id="mainNavbar" class="navbar navbar-expand-sm navbar-light bg-light">
            <div class="container">
                <a class="navbar-brand" href="#" target="_blank" id="brand_name">AI</a>
               <!--toggle_button-->
                <button class="navbar-toggler" id="navbar-button" type="button" data-bs-toggle="collapse" data-bs-target="#navLinks" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button> 
                <!--navbar options/buttons-->
                <div class="collapse navbar-collapse" id="navLinks">
                    <div class="navbar-nav">                        
                            <a class="nav-link active" aria-current="page" href="" id="home">Home</a>
                            <a class="nav-link" href="#" id="about">About</a>
                            <a class="nav-link" href="KT_portfolio.html" id="portfolio">Portfolio</a>
                            <a class="nav-link" href="KT_testimonials.html" id="testimonials">Testimonials</a>                       
                    </div>
                </div>

            </div>
        </nav>

    </header>


    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
</body>

</html>

While your answer may solve the question, [including an explanation](https://meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. You can edit your answer to add explanations and give an indication of what limitations and assumptions apply. - [From Review](https://stackoverflow.com/review/late-answers/28310684) — Adam Marshall, Feb 12 '21 at 18:09
You're right :( I just started web-development a few days ago and have zero experience on how things work and why. I figured this solution, just by trying out different commands. I'll try and give a more thorough explanation in future posts. — ai dubxr, Feb 12 '21 at 19:56

score 2 · Answer 10 · edited Feb 14 '21 at 13:52

2

As an alternative approach, you can try flex:

 <nav class="navbar navbar-dark bg-dark d-flex justify-content-end">

edited Feb 14 '21 at 13:52

Adrian Mole

49,934
160
51
83

answered Feb 14 '21 at 13:33

Çetin

117
2
6

lucho20pt · Answer 11 · 2022-04-05T23:22:23.263

"dependencies": { "bootstrap": "^5.1.3", "next": "12.1.4", "node-sass": "^7.0.1", "react": "18.0.0", "react-bootstrap": "^2.2.3", "react-dom": "18.0.0" },

first option

<Navbar.Collapse id="basic-navbar-nav" className="justify-content-end">
        <Nav>
          <Link href="/" passHref>
            <Nav.Link>Home</Nav.Link>
          </Link>
        </Nav>
      </Navbar.Collapse>

className="justify-content-end"

or second option

<Navbar.Collapse id="basic-navbar-nav">
        <Nav className="ms-auto">
          <Link href="/" passHref>
            <Nav.Link>Home</Nav.Link>
          </Link>
        </Nav>
      </Navbar.Collapse>

className="ms-auto"

score 1 · Answer 12 · answered Aug 06 '22 at 16:36

1

This worked for me:

<div class="d-flex flex-row-reverse">

answered Aug 06 '22 at 16:36

Umair Sultan

618
6
10

score 1 · Answer 13 · answered Sep 05 '22 at 04:54

I have used d-flex for right side alignment

   <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial- 
         scale=1">
        <title>Bootstrap demo</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
   </head>
   <body>


  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled">Disabled</a>
                </li>
            </ul>

            <div class="d-flex">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Right link 1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Right link 2</a>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</nav>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
     </body>
  </html>

Bootstrap 5 navbar align items right

13 Answers13

Edit

Linked

Related