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.

Hardison

Answer 1

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?

Housewarming

perfect for me - head div for nav-items had to have ms-auto to flex to the end. Lifesaver! God bless you – Parceling

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 👍👍 – Viguerie

Answer 2

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">

Flushing

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. – Cyndie

@Cyndie 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 developer.mozilla.org/en-US/docs/Web/CSS/margin-left#syntax – Bleacher

Worked for me. Agreed, it doesn't make a lot of sense, I just need it to work. – Silvio

Answer 3

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

Minium

Answer 4

The justify-content-end class makes the difference.

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

Gapes

This is simple and effective. – Buonomo

Why only this solution with navbar worked on 5.0.3 alpha? – Biestings

Answer 5

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>

Sought

Answer 6

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/[email protected]/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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

Dispute

It does not. Please check getbootstrap.com/docs/5.0/migration/#utilities – Bathsheeb

Ok, I changed the answer I answered this question when bootstrap was in alpha. I did update the answer to the new version. Thanks. – Dispute

Answer 7

This one worked fine for me,

check this out :

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

Hacksaw

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. – Emir

Answer 8

Replace mr-auto with ms-auto

This worked for me, hope it helps you :)

Oneself

Hello and welcome to SO! Please read the tour, and How do I write a good answer? For example you can elaborate what such change will do. – Chifforobe

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). – Overpowering

Answer 9

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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
</body>

</html>

Litter

While your answer may solve the question, including an explanation 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 – Forbidding

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. – Litter

Answer 10

As an alternative approach, you can try flex:

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

Pyorrhea

Answer 11

This worked for me:

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

Winegrower

Answer 12

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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
     </body>
  </html>

Lexi

Answer 13

"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"

Antepenult

Answer 14

If the "mb-2" and "mb-lg-0" class is not necessary, simply use the following code, and it should work. Otherwise, you can try adding the "mb-2 mb-lg-0" class to the code.

<ul class="navbar-nav ms-auto">

Here is my Bootstrap 5 Navbar code: - Run Code Snippet

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg bg-primary navbar-dark" aria-label="Fourth navbar example">
  <div class="container">
    <a class="navbar-brand" href="https://webziz.in/bmi/">BMI Free Calculator</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

    <div class="collapse navbar-collapse" id="navbarsExample04">
      <ul class="navbar-nav ms-auto mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" aria-current="page" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
  <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z"></path>
  <path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293z"></path>
</svg> Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://webziz.in/bmi/about-us/">About Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://webziz.in/bmi/privacy-policy/">Privacy Policy</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://webziz.in/bmi/terms-and-conditions/">Terms &amp; Conditions</a>
        </li>

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

Fragmental

Thank you for your interest in contributing to the Stack Overflow community. This question already has quite a few answers—including one that has been extensively validated by the community. Are you certain your approach hasn’t been given previously? If so, it would be useful to explain how your approach is different, under what circumstances your approach might be preferred, and/or why you think the previous answers aren’t sufficient. Can you kindly edit your answer to offer an explanation? – Romantic