Bootstrap 4 navbar unable to shift items to the right

Question

I am trying to shift my login and sign up buttons to the right of my navbar. I have tried using floats, ul containing it, align items and a ton more. Here is my code

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Connect4</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Settings</a>
      </li>

      <ul ul class="nav mr-auto" style="float: none!Important;">
        <li class="nav-item">
          <a class="nav-link" href="#">Login</a>
        </li> 
        <li class="nav-item">
          <a class="nav-link" href="#">Sign up</a>
        </li> 
      </ul>
      

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


</body>

</html>

From [this](https://stackoverflow.com/questions/46597205/bootstrap-4-float-right-not-working-with-the-navbar) exact duplicate follow the first answer - that exactly what you need. Happy coding :) — Always Helping, Sep 30 '20 at 03:27
@AlwaysHelping Hello, it does not. I am trying to only move 2 elements to the right atm — Lamar, Sep 30 '20 at 03:31

Ragul CS · Answer 1 · 2020-09-30T03:27:47.580

1

Just add ml-auto in tag eg:

<ul class="ml-auto"><ul>

edited Sep 30 '20 at 03:27

answered Sep 30 '20 at 03:21

Ragul CS

417
3
11

FluffyKitten · Answer 2 · 2020-09-30T03:52:57.367

Bootstrap uses flexbox for it's nav, this is why float, text-align etc won't work. Instead, you will need to change your HTML structure to separate the inner ul with the buttons from the main ul, and then you can use the add the Bootstrap class justify-content-between to your navbar, e.g.

<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">

This tells the Bootstrap nav to align the 2 ul elements to either end of the nav bar- see the Boostrap Flex documentation

(Note, you can also remove the style="float: none!Important;" inline style)

Working Snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Connect4</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Settings</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="#">Sign up</a>
      </li>
    </ul>
  </div>
</nav>

This shifted all the elements to the right, is there a way to keep all to the left and to the right just login and sign up? — Lamar, Sep 30 '20 at 03:27

score 1 · Accepted Answer · answered Sep 30 '20 at 03:33

You need to use justify-content-between on your div (navbar-collapse) and put the login and sign-up ul outside the first ul

<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">

Demo:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Connect4</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Settings</a>
      </li>
    </ul>
    <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="#">Sign up</a>
      </li>
    </ul>
  </div>
</nav>

score 1 · Answer 4 · answered Sep 30 '20 at 04:32

The Problem with your code was that you wrapped both ul inside one.Take 2 ul and apply ml-auto on one you want to push to the right.

<ul class="navbar-nav mr-auto">
<ul class="navbar-nav ml-auto">



<link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    />
    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
      <!-- Brand -->
      <a class="navbar-brand" href="#">Connect4</a>

      <!-- Toggler/collapsibe Button -->
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#collapsibleNavbar"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- Navbar links -->
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
      
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Settings</a>
          </li>
        </ul>       
          
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Sign Out</a>
          </li>
        </ul>
        
      </div>
    </nav>

Bootstrap 4 navbar unable to shift items to the right

4 Answers4