Bootstrap 5 navbar align items right

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.

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?

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

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

The justify-content-end class makes the difference.

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

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>

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>

This one worked fine for me,

check this out :

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

Replace mr-auto with ms-auto

This worked for me, hope it helps you 🙂

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>

As an alternative approach, you can try flex:

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

This worked for me:

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

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>

“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”

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 & Conditions</a>
        </li>

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

Find ul tag and change me-auto to me-5 and add ms-auto as shown in the below code:

<ul className="navbar-nav me-5 mb-2 mb-lg-0 ms-auto">

Filed under: Kiến thức lập trình - @ 19:33

Thẻ: twitter-bootstrapbootstrap-5

Thiết kế website giá rẻ

Danh mục

Bootstrap 5 navbar align items right

Edit