0

I am working with the Bootstrap 4 default navbar and I just want to justify the menu items to the right, not the left.

This should be simple right? But I've been Googling without success for 25 minutes now.

I've tried adding ml-auto and justify-content-end to the menu div, neither are helping.

Here is my code: https://www.bootply.com/oZD5wplHVi#

UPDATE: It seems I was incorrectly using Bootstrap 3, oops. I would like to use Bootstrap 4, so I have updated my example, and tried adding .float-right (code):

<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
    <div class="container">
        <a class="navbar-brand" href="#">Brand</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">&#x2630;</button>
        <div class="collapse navbar-collapse float-right">
            <ul class="nav navbar-nav">
                <li class="active nav-item"><a href="#" class="nav-link">Home</a>
                </li>
                <li class="nav-item"><a href="#about" class="nav-link">About</a>
                </li>
                <li class="nav-item"><a href="#contact" class="nav-link">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</div>

But still no joy... What am I doing wrong?

Update 2: Replaced with new clean question Bootstrap 4: Justify menu to right in navbar? without confusing edits.

Richard
  • 62,943
  • 126
  • 334
  • 542
  • There's a trick in your snippet: old-fashioned `float: left` instead of flexbox. See Obsidian Age's answer for the reasoning :) – Siavas Jan 28 '19 at 00:47
  • This question is now messy and confusing so I've replaced it with a new clean question: https://stackoverflow.com/questions/54400642/bootstrap-4-justify-menu-to-right-in-navbar – Richard Jan 28 '19 at 11:07

1 Answers1

1

You appear to have a Bootstrap 3 navbar, rather than a Bootstrap 4 one.

Bootstrap 3

In this case, you're simply looking to apply .pull-right on the containing .navbar-collapse:

<div class="collapse navbar-collapse pull-right">


body {
  padding-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse pull-right">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</div>

<div class="container">

  <div class="text-center">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>

</div>
<!-- /.container -->

Note that this shrinks the clickable area (as it's essentially just applying float: right), so you may wish to apply the class text-right instead to retain the full width for the element:

body {
  padding-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse text-right">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</div>

<div class="container">

  <div class="text-center">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>

</div>
<!-- /.container -->

Boostrap 4

Aligning navbars in Bootstrap 4 is much more well-documented in this question, though the general principal is the same - apply either .float-right or .text-right to the containing .navbar-nav <ul>:

<ul class="navbar-nav text-right">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<body>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav text-right">
        <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">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </nav>
  <main role="main" class="container">
    <div class="starter-template">
      <h1>Bootstrap starter template</h1>
      <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
    </div>
  </main>
</body>
Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • Thanks! Must have copied and pasted a Bootstrap 3 snippet during my quest. But I do want to use Bootstrap 4 though, so what should I be doing instead? – Richard Jan 28 '19 at 01:01
  • Thanks! - but I've copied and pasted the Bootstrap 4 code from your answer here, and the menu is still on the left...? https://www.bootply.com/NprzHBqnrd – Richard Jan 28 '19 at 01:45
  • 1
    In the new snippet you would need [`.ml-auto`](https://www.bootply.com/Pt9ntQPYQJ) as the parent uses `display: flex`. Also the new snippet is indeed Bootstrap 4, but the one in the new question still seems to be syntax from v3 (e.g. `.nav` class on `ul`). Check [this example here](https://getbootstrap.com/docs/4.0/components/navbar/#nav). – Siavas Jan 28 '19 at 11:34