Bootstrap Align Navbar Items 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 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>

html - Bootstrap navbar - How to align items left and right

As I can see you are using bootstrap4, so you have to replace <ul class="nav navbar-nav navbar-left" id="text"> to <ul class="navbar-nav mr-auto" id="text">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">  <!-- <a class="navbar-brand" href="#">Navbar</a> -->  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">    <span class="navbar-toggler-icon"></span>  </button>
  <div class="navbar-collapse collapse" id="navbarSupportedContent">    <ul class="navbar-nav mr-auto" id="text">      <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="#">Link</a>      </li>      <li class="nav-item dropdown">        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">          Dropdown        </a>        <div class="dropdown-menu" aria-labelledby="navbarDropdown">          <a class="dropdown-item" href="#">Action</a>          <a class="dropdown-item" href="#">Another action</a>          <div class="dropdown-divider"></div>          <a class="dropdown-item" href="#">Something else here</a>        </div>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Disabled</a>      </li>    </ul>    <form class="form-inline my-2 my-lg-0">      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>    </form>  </div></nav>

Related Topics

Make a Div Fill an Entire Table Cell

How to Remove Border of Drop Down List:Css

Remove Padding from Columns in Bootstrap 3

Bootstrap Center Vertical and Horizontal Alignment

What Does !Important Mean in Css

How to Hide an Element When Printing a Web Page

Change Bootstrap Navbar Collapse Breakpoint Without Using Less

Why Do the :Before and :After Pseudo-Elements Require a 'Content' Property

Remove Blue Underline from Link

Css Styling in Django Forms

Css Hover Drop Down Menu Disappears When Trying to Select Menu Option

How to Fill Html5 Input[Type=Range] on the Left Side of the Thumb With CSS Only

How to Make a Floated Div 100% Height of Its Parent

How to Create Grid/Tile View

Why Does Applying a Css-Filter on the Parent Break the Child Positioning

How to Replace Text With Css

Customizing Bootstrap CSS Template

How to Select an Element Based on the State of Another Element in the Page With Css


Leave a reply



Submit