navbar-right does not work - css

Self-explanatory. Why does navbar-right not close out the two nav bar elements to the right? I have added the proper code so I am confused as to why it does not work.
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse navbar-expanded" id="mainNav">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-="data-" toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="nav navbar-nav navbar-left">
<li class="nav-item">
<a class="nav-link page-scroll" href="#about">About</a></li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#services">Products</a></li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#pricing">Pricing</a></li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">
<a class="nav-link page-scroll" href="sign-up" style="background-color:blue; border-radius:5px">Sign Up</a></li>
<li class="nav-item">
<a class="nav-link page-scroll" href="sign-in" style="background-color:blue; border-radius:5px">Log In</a></li>
</ul>
</div>
</div>
</nav>


You need to close your collapse button and you have a bunch of errors in the attributes of that tag.
<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"/>
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse navbar-expanded" id="mainNav">
<div class="container">
<button class="navbar-toggle navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">menu</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="nav navbar-nav navbar-left">
<li class="nav-item">
<a class="nav-link page-scroll" href="#about">About</a></li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#services">Products</a></li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#pricing">Pricing</a></li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">
<a class="nav-link page-scroll" href="sign-up" style="background-color:blue; border-radius:5px">Sign Up</a></li>
<li class="nav-item">
<a class="nav-link page-scroll" href="sign-in" style="background-color:blue; border-radius:5px">Log In</a></li>
</ul>
</div>
</div>
</nav>


Is this what you want? add navbar-right to the parent of that two <ul> element and remove them from <ul>:
<div class="collapse navbar-collapse navbar-right" id="navbarResponsive">
nav {
margin-top: 100px; /* ignore this, just to show example at stackoverflow*/
}
<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" />
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse navbar-expanded" id="mainNav">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">My Menu</button>
<div class="collapse navbar-collapse navbar-right" id="navbarResponsive">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link page-scroll" href="#about">About</a></li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#services">Products</a></li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#pricing">Pricing</a></li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link page-scroll" href="sign-up" style="background-color:blue; border-radius:5px">Sign Up</a></li>
<li class="nav-item">
<a class="nav-link page-scroll" href="sign-in" style="background-color:blue; border-radius:5px">Log In</a></li>
</ul>
</div>
</div>
</nav>

Related

Bootstrap double row in navbar [duplicate]

This question already has an answer here:
Create responsive Bootstrap navbar with two rows
(1 answer)
Closed 3 years ago.
I have changed the code of the standard fixed nabar header in BootStrap (no changes in CSS) to achieve to get the menu items below the logo like
But when using the code I am getting
Any suggestions?
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<div class="container">
<div class="row">
<ul class="collapse navbar-collapse navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="mailto:info#rotterdamsteelworks.nl"><small><i class="fas fa-envelope"></i> Stuur e-mail</small></a>
</li>
<li class="nav-item">
<a class="nav-link" href="tel:00310184632456"><small><i class="fas fa-phone-volume"></i> +31(0)184-632456</small></a>
</li>
</ul>
<a class="navbar-brand" href="index.php"><img class="img-fluid" src="img/logo.png" width="400" alt="Rotterdam Steel Works"></a>
<ul class="collapse navbar-collapse navbar-nav ml-auto">
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_metaalunie.png" width="60" alt="Metaalunie"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_iso_9001.png" width="60" alt="ISO 9001"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png" width="60" alt="CE NEN EN1090"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_lr.png" width="60" alt="Lloyds overstempelbevoegd"></a>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="row">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php">Over RSW</a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php">Certificering</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Media</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</nav>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<ul class="collapse navbar-collapse navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="mailto:info#rotterdamsteelworks.nl"><small><i class="fas fa-envelope"></i> Stuur e-mail</small></a>
</li>
<li class="nav-item">
<a class="nav-link" href="tel:00310184632456"><small><i class="fas fa-phone-volume"></i> +31(0)184-632456</small></a>
</li>
</ul>
<a class="navbar-brand" href="index.php"><img class="img-fluid" src="img/logo.png" width="400" alt="Rotterdam Steel Works"></a>
<ul class="collapse navbar-collapse navbar-nav mr-auto">
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_metaalunie.png" width="60" alt="Metaalunie"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_iso_9001.png" width="60" alt="ISO 9001"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png" width="60" alt="CE NEN EN1090"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_lr.png" width="60" alt="Lloyds overstempelbevoegd"></a>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="row">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php">Over RSW</a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php">Certificering</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Media</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact</a>
</li>
</ul>
</div>
</div>
Change this code and say what happened pls...

How can i make border for active class nav-item in bootstrap 4?

I want to change some styles in nav-item. I made another style sheet and in that I made this code. The problem is that in Internet Explorer it works fine but in Firefox nothing changes. How can I make some changes in nav-link active?
For example, I want to have a border-bottom when the nav is active.
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light py-md-5">
<a class="navbar-brand" href="#">Navbar</a>
<div class="justify-content-end collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">ABOUT US</a>
<a class="nav-item nav-link" href="#">SERVICES</a>
<a class="nav-item nav-link" href="#">TEAM</a>
<a class="nav-item nav-link" href="#">CLIENTS</a>
<a class="nav-item nav-link" href="#">CONTACT</a>
</div>
</div>
</nav>
</div>

add this css in your custom style
.nav-item.active
{
border-bottom:2px solid #f00;
}
.nav-item.active
{
border-bottom:2px solid #f00;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light py-md-5">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="justify-content-end collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TEAM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CLIENTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>

$('.nav-link').click(function() {
$('.nav-link').removeClass("active");
$('li.nav-item.active').removeClass("active");
$(this).addClass("active");
});
.active {
border-bottom: 2px solid #f00;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light py-md-5">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="justify-content-end collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TEAM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CLIENTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>

Bootstrap 4 center navbar brand with collapse

Bootstrap 4 Alpha 6
I cant seem to figure out how to get both the right links and left link to both collapse. Right now only the right hand side link collapses.
<nav id="topNav" class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse">
Menu
</button>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<a class="navbar-brand mx-auto" href="#">NavBar</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>

You should wrap both the menus ul in one navbar-collapse div. Toggle Menu button will only target one collapse div not multiple. As earlier there were two navbar-collapse.
Here is code you should use.
<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">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav id="topNav" class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse">
Menu
</button>
<a class="navbar-brand mx-auto" href="#">NavBar</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>

Currently in alpha 6, the collapse only supports a single target..
Update Bootstrap 4.1
You can absolute position the brand on larger screens, and use a single collapse for the 2 navbars.
#media (min-width: 768px) {
.navbar-brand
{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
http://www.codeply.com/go/Sh05HDqIh1
Also see:
Center an element in Bootstrap 4 Navbar
How to center nav-items in Bootstrap?

<nav id="topNav" class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse">
Menu
</button>
<a class="navbar-brand mx-auto" href="#">NavBar</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>

The code posted by ZimSystem will overlap the menu items due to having 100% width and might clash with click events etc. A better option would be to use left instead of width.
.navbar-brand
{
display: block;
left: 50%;
position: absolute;
text-align: center;
}

Bootstrap 4 navbar with 2 rows

I have created a navbar with Bootstrap 4 alpha 6 that has a large brand/icon on the left, and 2 navbar-nav's with links to the right of the icon. One nav has links, and the other nav has icons. It's working exactly as I want except for one thing.
I'd like the 2 navbars to appear in 2 separate rows to the right of the icon. Like this:
------------------------------------------------------
link link link link
brand-icon -------------------------------------------
icon icon icon
------------------------------------------------------
The mobile version will still show the links vertically as it does now. I've tried several different things with flexbox, but can't get it to work.
Here is my code:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<div class="container">
<button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="py-2 ml-lg-2 mx-3"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></h1>
<div class="collapse navbar-collapse ml-lg-0 ml-3" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link pr-3" href="#"><i class="fa fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link pr-3" href="#"><i class="fa fa-instagram"></i></a>
</li>
<li class="nav-item">
<a class="nav-link pr-3" href="#"><i class="fa fa-twitter"></i></a>
</li>
</ul>
</div>
</div>
</nav>

You can use the flex-column flexbox utility class to stack the 2 navs vertically next to the icon. This sets flex-direction: column on the navbar-collapse div so that it's child elements stack vertically.
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<div class="container">
<button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="py-2 ml-lg-2 mx-3"><i class="fa fa-envelope-o fa-lg mt-2" aria-hidden="true"></i></h1>
<div class="collapse navbar-collapse flex-column ml-lg-0 ml-3" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
</ul>
<ul class="navbar-nav flex-row mb-2">
<li class="nav-item">
<a class="nav-link py-1 pr-3" href="#"><i class="fa fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link py-1 pr-3" href="#"><i class="fa fa-instagram"></i></a>
</li>
<li class="nav-item">
<a class="nav-link py-1 pr-3" href="#"><i class="fa fa-twitter"></i></a>
</li>
</ul>
</div>
</div>
</nav>
Demo - Bootstrap 4 navbar with 2 rows
Here's another variation with the 2 rows and right align search form:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand my-auto" href="#">Brand</a>
<div class="collapse navbar-collapse flex-md-column" id="navbarCollapse">
<ul class="navbar-nav ml-auto small">
<li class="nav-item active">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
</ul>
<form class="form-inline ml-auto">
...
</form>
</div>
</nav>
Demo - Navbar with 2 rows on right
Update for Bootstrap 4.0.0:
https://www.codeply.com/go/05hEHoiUvv
Here is an alternate scenario with 2 navbars with one mobile toggler
Bootstrap 4.0 - Two NavBars that collapse into one toggle
How can I have Brand and Navbar on separate lines?
How move 'nav' element under 'navbar-brand' in my Navbar
How to place navbar below sticky navbar using bootstrap 4?
Bootstrap 4 Multiple fixed-top navbars

The "variation with the 2 row aligned right" did not right-align the rows in Safari for me. I put the unordered lists in a new div with the flex-column and ml-auto classes.
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<div class="container">
<button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button>
<h1 class="py-2 ml-lg-2 mx-3"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></h1>
<div class="collapse navbar-collapse ml-lg-0 ml-3" id="navbarCollapse">
<div class="flex-column ml-auto">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Product</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Shop</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Events</a> </li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-facebook"></i></a> </li>
<li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-instagram"></i></a> </li>
<li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-twitter"></i></a> </li>
</ul>
</div>
</div>
</div>
</nav>

<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand col-lg-1" href="#">
<img src="../assets/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
SMS-WEB
</a>
<!--me-auto mb-2 mb-lg-0 -->
<div class="collapse navbar-collapse flex-column ml-lg-0 ml-3 col-lg-11" id="navbarSupportedContent">
<ul class="navbar-nav col-lg-12 " >
<li class="nav-item col-lg-8">
<app-searchbox class=""></app-searchbox>
<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></li>
<li class="nav-item " style="display:inline-flex;">
<span style="font-size: 2em; color: Tomato;" class="pr-2 text-wrap">
<fa icon="user" class=""/></span>
<div style="display:block">
<div class="row-1 " style="font-size:13px">
<a class="nav-link active p-0" href="#">Hello, Sign in</a>
</div>
<div class="row-2" style="font-size:15px"><span>My Account</span></div>
</div>
</li>
<li class="nav-item ">
<span style="font-size: 2em; color: Tomato;" class="pr-2 pl-3 text-wrap">
<fa icon="heart" class=""/></span>
</li>
<li class="nav-item " style="display:inline-flex;" id="nav-cart" >
<span style="font-size: 2em; color: Tomato;" class="pl-2 pr-2 text-wrap rounded-circle" >
<fa :icon="['fas', 'cart-plus']"></fa></span>
<div style="display:block">
<div class="row-1" style="font-size:13px">
<a class="nav-link active p-0" href="#">My cart</a>
</div>
<div class="row-2" style="font-size:15px" ><span>Rs: 2500/=</span>
</div>
</div>
<app-dropcart id="drop-cart"/>
</li>
</ul>
<ul class="navbar-nav flex-row mb-2 col-lg-12" >
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
import searchbox from '#/components/search.vue'
import dropCart from '#/components/drop-cart.vue'
export default {
name: 'navbar',
props: {
msg: String
},
components: {
'app-searchbox':searchbox,
'app-dropcart':dropCart
}
}
</script>
<style lang="sass">
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand col-lg-1" href="#">
<img src="../assets/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
SMS-WEB
</a>
<!--me-auto mb-2 mb-lg-0 -->
<div class="collapse navbar-collapse flex-column ml-lg-0 ml-3 col-lg-11" id="navbarSupportedContent">
<ul class="navbar-nav col-lg-12 " >
<li class="nav-item col-lg-8">
<div class="container ">
<form class="d-flex">
<input class="form-control rounded-0 ml-5" type="search" placeholder="Search product here..." aria-label="Search">
<button class="btn btn-outline-success rounded-0" type="submit">Search</button>
</form>
</div>
<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></li>
<li class="nav-item " style="display:inline-flex;">
<span style="font-size: 2em; color: Tomato;" class="pr-2 text-wrap">
<i class="fas fa-cart-plus"></i></span>
<div style="display:block">
<div class="row-1 " style="font-size:13px">
<a class="nav-link active p-0" href="#">Hello, Sign in</a>
</div>
<div class="row-2" style="font-size:15px"><span>My Account</span></div>
</div>
</li>
<li class="nav-item ">
<span style="font-size: 2em; color: Tomato;" class="pr-2 pl-3 text-wrap">
<i class="fas fa-cart-plus"></i></span>
</li>
<li class="nav-item " style="display:inline-flex;" id="nav-cart" >
<span style="font-size: 2em; color: Tomato;" class="pl-2 pr-2 text-wrap rounded-circle" >
<fa :icon="['fas', 'cart-plus']"></fa></span>
<div style="display:block">
<div class="row-1" style="font-size:13px">
<a class="nav-link active p-0" href="#">My cart</a>
</div>
<div class="row-2" style="font-size:15px" ><span>Rs: 2500/=</span>
</div>
</div>
<app-dropcart id="drop-cart"/>
</li>
</ul>
<ul class="navbar-nav flex-row mb-2 col-lg-12" >
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- help http://wa.me/+94711308100 -->

Bootstrap align navbar items to the right

How do I align a navbar item to right?
I want to have the login and register to the right.
But everything I try does not seem to work.
This is what I have tried so far:
<div> around the <ul> with the atribute: style="float: right"
<div> around the <ul> with the atribute: style="text-align: right"
tried those two things on the <li> tags
tried all those things again with !important added to the end
changed nav-item to nav-right in the <li>
added a pull-sm-right class to the <li>
added a align-content-end class to the <li>
This is my code:
<div id="app" class="container">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<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="#">Pricingg</a>
</li>
</ul>
<ul class="navbar-nav " >
<li class="nav-item">
<a class="nav-link" href="{{ url('/login') }}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('/register') }}">Register</a>
</li>
</ul>
</nav>
#yield('content')
</div>

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
Related: Bootstrap NavBar with left, center or right aligned items

In my case, I wanted just one set of navigation buttons / options and found that this will work:
<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Sign Out</a>
</li>
</ul>
</div>
So, you will add justify-content-end to the div and omit mr-auto on the list.
Here is a working example.

For those who is still struggling with this issue in BS4 simply try below code -
<ul class="navbar-nav ml-auto">

On Bootstrap 4
If you want to align brand to your left and all the navbar-items to right, change the default mr-auto to ml-auto
<ul class="navbar-nav ml-auto">

On Bootsrap 4.0.0-beta.2, none of the answers listed here worked for me. Finally, the Bootstrap site gave me the solution, not via its doc but via its page source code...
Getbootstrap.com align their right navbar-nav to the right with the help of the following class: ml-md-auto.

Use this code to move items to the right.
<div class="collapse navbar-collapse justify-content-end">

Use ml-auto instead of mr-auto after applying nav justify-content-end to the ul

Just add mr-auto class at ul:
<ul class="nav navbar-nav mr-auto">
If you have menu list in both side you can do something like this:
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">left 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">left 2</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">left disable</a>
</li>
</ul>

If you want Home, Features and Pricing on left immediately after your nav-brand, and then login and register on right then wrap the two lists in <div> and use .justify-content-between:
<div class="collapse navbar-collapse justify-content-between">
<ul>....</ul>
<ul>...</ul>
</div>

In bootstrap v4.3 just add ml-auto in <ul class="navbar-nav">
Ex:<ul class="navbar-nav ml-auto">

use the flex-row-reverse class
<nav class="navbar navbar-toggleable-md navbar-light">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<i class="fa fa-hospital-o fa-2x" aria-hidden="true"></i>
</a>
<div class="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup">
<ul class="navbar-nav">
<li><a class="nav-item nav-link active" href="#" style="background-color:#666">Home <span class="sr-only">(current)</span></a</li>
<li><a class="nav-item nav-link" href="#">Doctors</a></li>
<li><a class="nav-item nav-link" href="#">Specialists</a></li>
<li><a class="nav-item nav-link" href="#">About</a></li>
</ul>
</div>
</div>
</nav>

It's little change in boostrap 4.
To align navbar to right side, you've to make only two changes.
they are:
in navbar-nav class add w-100 as navbar-nav w-100 to make width as 100
in nav-item dropdown class add ml-auto as nav-item dropdown ml-auto to make margin left as auto.
If you didn't understand, please refer the image that i've attached to this.
CodePen Link
Full source code
<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="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav w-100">
<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>
<li class="nav-item dropdown ml-auto">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>

For bootstrap 4.3.1, I was using nav-pills and nothing worked for me except this:
<ul class="nav nav-pills justify-content-end ml-auto">
<li ....</li>
</ul>

In my case Bootstrap v5, I wanted just one set of navigation options to the right side:
just add "ms-auto" in ul.
And it helped me.
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ms-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link " aria-current="page" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link " href="services.php" tabindex="-1" aria-disabled="true">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.php">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Portfolio.php">Portfolio</a>
</li>
</ul>
</div>

The above answers surprisingly didn't work for me so here is my approach. To align the login and register navigation bar items to the right you can make use of either of these two ways:
pull-right:
Modify the unordered list tag for login and register as
<ul class="navbar-nav pull-right">
navbar-right:
Modify the unordered list tag for login and register as
<ul class="navbar-nav navbar-right">

I am running Angular 4 (v.4.0.0) and ng-bootstrap (Bootstrap 4). This code won't all be relevant but hoping people can pick and choose what works. It took me sometime to find a solution to get my items to justify right, collapse properly and to implement a dropdown off my google (using OAuth) profile picture.
<div id="header" class="header">
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-faded fixed-top">
<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"></span>
</button>
<a class="navbar-brand" href="#">
<img alt='Brand' src='../assets/images/logo-white.png' class='navbar-logo-img d-inline-block align-top '>
<span class="navbar-logo-text">Oncoscape</span>
</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav float-left">
<a class="navbar-items nav-item nav-link active " *ngIf='authenticated' (click)='goDashboard()'>
<span class="fa fa-dashboard"></span>Dashboard
</a>
<a class="nav-item nav-link navbar-items active" href="http://resources.sttrcancer.org/oncoscape-contact">
<span class="fa fa-comments"></span>Feedback
</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img *ngIf='user && authenticated' class="navbar-pic" src={{user.thumbnail}} alt="Smiley face">
</a>
<div *ngIf='user && authenticated' class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" (click)="toProfile()">Account</a>
<div class="dropdown-item">
<app-login></app-login>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
<router-outlet></router-outlet>

For Bootstrap 4 beta, sample navbar with elements aligned to the right side is:
<div id="app" class="container">
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<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="#">Pricingg</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{{ url('/login') }}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('/register') }}">Register</a>
</li>
</ul>
</nav>
</div>

Using the bootstrap flex box helps
us to control the placement and alignment of your navigation element.
for the problem above adding mr-auto is a better solution to it .
<div id="app" class="container">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<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="#">Pricingg</a>
</li>
</ul>
<ul class="navbar-nav " >
<li class="nav-item">
<a class="nav-link" href="{{ url('/login') }}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('/register') }}">Register</a>
</li>
</ul>
</nav>
#yield('content')
</div>
other placement may include
fixed- top
fixed bottom
sticky-top

The working example for BS v4.0.0-beta.2:
<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="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<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="#">Pricingg</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>
<div class="container-fluid">
container content
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>

If all above fails, I added 100% width to the navbar class in CSS. Until then mr auto wasn't working for me on this project using 4.1.

but the nav item you want to align to right in alone
put it outside the of main nav but in the same , like that:
<ul class="navbar-nav justify-content-end ms-auto">
<li class="nav-item">
<a class="nav-link" href="#" aria-expanded="false">Contact support</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#" aria-expanded="false">Log in</a>
</li>
</ul>
use justify-content-end ms-auto

Find the 69 line in the verndor-prefixes.less and write it following:
.panel {
margin-bottom: 20px;
height: 100px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

Just copied this from one of the getbootstrap pages for the released version 4 which worked much better than the above
<div class="d-none d-xl-block col-xl-2 bd-toc float-md-right">
<ul class="section-nav">
<li class="toc-entry toc-h2">Overview</li>
<li class="toc-entry toc-h2">Classes</li>
<li class="toc-entry toc-h2">Mixins</li>
<li class="toc-entry toc-h2">Responsive</li>
</ul>
</div>

I'm new to stack overflow and new to front end development. This is what worked for me. So I did not want list items to be displayed.
.hidden {
display:none;
}
#loginButton{
margin-right:2px;
}
<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top">
<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"></span>
</button>
<a class="navbar-brand" href="#">NavBar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active hidden">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item hidden">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item hidden">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="loginButton">Log In</button>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Register</button>
</form>
</div>
</nav>

Resources