Bootstrap 4 float-right not working with the navbar

Question

This is the code. I need to move navbar(without logo) to right side.

So I added float-right to like <div class="collapse navbar-collapse float-right" id="navbarSupportedContent">.

But it did not worked.

Full Code

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Popular Quotes Collection</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="collapse navbar-collapse float-right" id="navbarSupportedContent">
        <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="#">Submit a Quote</a>
          </li>
        </ul>
      </div>
    </nav>

score 8 · Answer 1 · answered Oct 06 '17 at 02:41

Simply add:

.justify-content-end to .navbar-collapse
Remove floats, bootstrap 4 is flexbox by default so you can take advantage of this.

Like this:

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

Working Resizable Fiddle

score 0 · Answer 2 · answered Oct 06 '17 at 02:09

0

You can not use float because bs4 use display: flex; You can use class: 'justify-content-between' or get more about bootstrap4 flex class on this page https://getbootstrap.com/docs/4.0/utilities/flex/

answered Oct 06 '17 at 02:09

Nam PHAM HOANG

76
3

Obsidian Age · Answer 3 · 2017-10-06T02:32:20.023

0

You don't actually need to apply float-right at all, but rather navbar-toggler-right:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Popular Quotes Collection</a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon">Toggle</span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <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="#">Submit a Quote</a>
      </li>
    </ul>
  </div>
</nav>

Hope this helps! :)

edited Oct 06 '17 at 02:32

answered Oct 06 '17 at 02:09

Obsidian Age

41,205
10
48
71

Thanks for the answer. But it did not works because logo also goes to the right. Logo should be on left side and other munu's should go to the right – Sasa1234 Oct 06 '17 at 02:13
So the collapsible, drop-down menu should be the only one on the right? – Obsidian Age Oct 06 '17 at 02:17
Something like this. Please see the screenshot. https://image.ibb.co/hpVcdw/32323222222.png – Sasa1234 Oct 06 '17 at 02:23
I've updated my answer to cover that :) – Obsidian Age Oct 06 '17 at 02:32

Bootstrap 4 float-right not working with the navbar

3 Answers3

Linked

Related