How to Align Nav Items to the Right in Bootstrap 5

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

The code from my example Codeply is using Bootstrap 4, but your code is using Bootstrap 5 beta. If you take a look at the new Bootstrap 5 spacing utility classes you'll see that...

  • l (left) has been replaced with s (start)
  • r (right) has been replaced with e (end)

Why margin left (ml-*) is not working in Bootstrap 5?

ml-auto no longer exists, and the Bootstrap 5 equivalent would be ms-auto:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="d-flex flex-grow-1">
        <span class="w-100 d-lg-none d-block">
            <!-- hidden spacer to center brand on mobile --></span>
        <a class="navbar-brand d-none d-lg-inline-block" href="#"> Navbar 6 </a>
        <a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#">
            <img src="//placehold.it/40?text=LOGO" alt="logo">
        </a>
        <div class="w-100 text-right">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </div>
    <div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
        <ul class="navbar-nav ms-auto flex-nowrap">
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">How We Help</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">Blog</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Demo: https://codeply.com/p/zzFC5XoyUm

Why margin right (mr-*) is not working in Bootstrap 5?

Additionally, mr-auto has been replaced with me-auto.

Here you can read why Bootstrap 5 uses the start and end approach to improve RTL support since left and right are absolute, while start and end are relative.

The flexbox utils such as justify-content-end can also be used as explained here

Bootstrap 5: NAV items do not align to the right

I think you are looking for something like this:

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

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" />

  <title>Investigation Management and Alert Site</title>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">
          Investigation Management and Alert Site
        </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 ms-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="#">Inspections</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <i class="bi bi-person-fill"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

How to align navbar-items to the right on navbar-toggler

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <nav class="navbar navbar-expand-md">
      <a class="navbar-brand" href="/">
        <img
          class="navbar-logo"
          src="{% static 'site_base/images/image1.png' %}"
          alt="MagPie Logo"
        />
      </a>
      <button
        class="navbar-toggler navbar-dark"
        style="background-color: red"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#main-navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse text-end" id="main-navigation">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Products</a>
            <ul class="dropdown-menu">
              <li class="dropdown-item"><a href="/product1">Product 1</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Resources</a>
            <ul class="dropdown-menu">
              <li class="dropdown-item"><a href="#">User Guides</a></li>
              <li class="dropdown-item"><a href="#">Videos</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/company">Company</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/contact-us">Contact Us</a>
          </li>
        </ul>
      </div>
    </nav>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Bootstrap 5 - Navbar button align ment

Adding the class ms-auto to the button should push it to the right.

Bootstrap align navbar items to the right

Bootstrap 5 (update 2021)

In Bootstrap 5 (see this question), ml-auto has been replaced with ms-auto to represent start instead of left. Since the Navbar is still based on flexbox, auto margins OR flexbox utility classes are still used to align Navbar content.

For example, use me-auto...

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Brand</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Menu </a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

Bootstrap 5 right align Navbar content

Bootstrap 4 (original answer)

Bootstrap has many different ways to align navbar items. float-right won't work because the navbar is now flexbox.

You can use mr-auto for auto right margin on the 1st (left) navbar-nav.
Alternatively, ml-auto could be used on the 2nd (right) navbar-nav , or if you just have a single navbar-nav.

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Login</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
        </ul>
    </div>
</nav>

https://codeply.com/go/P0G393rzfm

There are also flexbox utils. For example use justify-content-end on the collapse menu:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Download</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Or when you have 2 navbar-navs, use justify-content-between in navbar-collapse would work to even the space between the navbar-navs:

 <div class="navbar-collapse collapse justify-content-between">
     <ul class="navbar-nav mr-auto">
               ..
     </ul>
     <ul class="navbar-nav">
           ..
     </ul>
 </div>

Update for Bootstrap 4.0 and newer

As of Bootstrap 4 beta, ml-auto will still work to push items to the right. Just be aware the the navbar-toggleable- classes have changed to navbar-expand-*

Updated navbar right for Bootstrap 4

Another frequent Bootstrap 4 Navbar right alignment scenario includes a button on the right that remains outside the mobile collapse nav so that it is always shown at all widths.

Right align button that is always visible

Sample Image

Sample Image

Related: Bootstrap NavBar with left, center or right aligned items

How to right align the last LI in bootstrap 5 navbar

You could achieve this with the classes .me-auto on the left div or .ms-auto on the right div. This adds a margin between the two different navigation elements. Here a short demo, but you can see some other examples with a searchbar in the navbar-documentation.

Changed navbar-expand-lg to just navbar-expand so the example is easily visible without needing to go fullpage.

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap navbar demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>

<body>
  <nav class="navbar navbar-expand navbar-light 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="#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">
        <!-- div class="navbar-nav"> -->
        <!-- use me-auto here... -->
        <div class="navbar-nav me-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>
        <!-- ...or use ms-auto here -->
        <!-- <div class="navbar-nav ms-auto"> -->
        <div class="navbar-nav">
          <a class="nav-link" href="#">Settings</a>
          <a class="nav-link" href="#">Account</a>
          <a class="nav-link" href="#"><span class="btn btn-outline-danger btn-sm">Logout</span></a>
        </div>
      </div>
    </div>
  </nav>

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

</html>

Related Topics

How to Stick a Footer to Bottom in CSS

Can Type Selectors Be Repeated to Increase Specificity

How to Use Relative/Absolute Paths in CSS Urls

On Ie CSS Font-Face Works Only When Navigating Through Inner Links

Combine CSS Attribute and Pseudo-Element Selectors

Zoom Control and Streetview Not Showing on My Google Map

Word-Wrap:Break-Word Not Working in IE8

Custom Cursor Image Doesn't Work in All Ies

How to Add Border Radius on Table Row

How to Use CSS to Position a Fixed Variable Height Header and a Scrollable Content Box

Box-Sizing Support in IE7

Background with 2 Colors in Javafx

What Does '&.' in '&.Sub-Title' Indicates in SCSS

Vertical-Align Image

Is This Possible to Create 2-Axis 4 Color Gradient in CSS (Bilinear Gradient)

Bootstrap 3: Pull-Right for Col-Lg Only

Angular Dynamic Background Images

Reuse CSS Animation in Reversed Direction (By Resetting the State)


Leave a reply



Submit