Bootstrap 4 navbar with 2 rows and inline form - css

Question

Ok so there are a number of questions like this but after having experimented with the code in some of the answers given to other similar questions, I'm still stuck!
I've managed to get 2 flex rows working in a flex column, with the brand image vertically centered, but I'm having trouble with the horizontal spacing.
On the first row of my navbar I have a list of nav-items and also an inline form with a search bar. I want the search bar to be right aligned, while the nav-items stay left aligned.
I've tried using justify-content-between on various elements but with no luck and I've also tried m*-auto classes but I just can't keep the nav-items and search bar on the same row while separating them horizontally!
Here's my code
.navbar {
padding-top: 0;
padding-bottom: 0;
/* box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12), 0 10px 10px rgba(0, 0, 0, 0.03); */
font-weight: 300;
}
.navbar-dark {
background: linear-gradient(to right, rgba(0, 45, 165, 0.97), rgba(10, 88, 157, 0.97), rgba(10, 88, 157, 0.97), rgba(0, 45, 165, 0.97));
}
.navbar-brand {
margin-right: 20px;
}
.nav-item {
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 80%;
padding: 0 .4rem;
}
.navbar .navbar-nav .nav-link {
transition: all .05s ease-in-out;
}
.navbar-dark .navbar-nav .nav-link.active {
border-bottom: 1px solid white;
}
.navbar-dark .navbar-nav .nav-link:hover {
border-bottom: 1px solid white;
}
.navbar-toggler:hover {
cursor: pointer;
}
#search-bar {
background-color: #5c87af;
color: white;
font-size: 14px;
width: 200px;
height: 30px;
transition: all .2s;
border: none;
}
#search-bar:hover {
background-color: #779ec1;
}
#search-bar:focus {
background-color: white;
color: #212529;
width: 400px;
}
#search-bar::-webkit-input-placeholder {
color: white !important;
}
#search-bar:-moz-placeholder {
/* Firefox 18- */
color: white !important;
}
#search-bar::-moz-placeholder {
/* Firefox 19+ */
color: white !important;
}
#search-bar:-ms-input-placeholder {
color: white !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-dark navbar-expand-sm">
<a class="navbar-brand" href="#">
<img src="/images/MW-logo-white.png" height=28 class="" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-column align-items-start" id="navbar">
<ul class="navbar-nav nav my-1">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#property-tab">PROPERTY</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#units-tab">UNITS</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tenancies-tab">TENANCIES</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#pdfs-tab">PDFs</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#contacts-tab">CONTACTS</a>
</li>
<form class="form-inline">
<input class="form-control search" type="text" id="search-bar" placeholder="Search..." autocomplete="off" spellcheck="false" autocorrect="off" />
</form>
</ul>
<ul class="navbar-nav nav my-1">
<li class="nav-item">
ALL
</li>
<li class="nav-item">
CURRENT
</li>
<li class="nav-item">
PAST
</li>
</ul>
</div>
</nav>

Answer 1

Just make sure both navbar-nav are full width. You can use w-100 for this...
https://www.codeply.com/go/DGmjwI79yy
<nav class="navbar fixed-top navbar-dark navbar-expand-sm">
<a class="navbar-brand" href="#">
<img src="//placehold.it/100x30" height=28 class="" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-column" id="navbar">
<ul class="navbar-nav nav my-1 w-100">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#property-tab">PROPERTY</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#units-tab">UNITS</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tenancies-tab">TENANCIES</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#pdfs-tab">PDFs</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#contacts-tab">CONTACTS</a>
</li>
<form class="form-inline ml-auto">
<input class="form-control search" type="text" id="search-bar" placeholder="Search..." autocomplete="off" spellcheck="false" autocorrect="off" />
</form>
</ul>
<ul class="navbar-nav nav my-1 w-100">
<li class="nav-item">
ALL
</li>
<li class="nav-item">
CURRENT
</li>
<li class="nav-item">
PAST
</li>
</ul>
</div>
</nav>
Then the ml-auto will work as expected to push the form right.
Related question:
Bootstrap 4 navbar with 2 rows

Answer 2

You can achieve this layout with only two class.
1 - Add w-100 here <ul class="navbar-nav nav my-1">
2 - Add ml-auto here <form class="form-inline">
Here is the working Demo
.navbar {
padding-top: 0;
padding-bottom: 0;
/* box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12), 0 10px 10px rgba(0, 0, 0, 0.03); */
font-weight: 300;
}
.navbar-dark {
background: linear-gradient(to right, rgba(0, 45, 165, 0.97), rgba(10, 88, 157, 0.97), rgba(10, 88, 157, 0.97), rgba(0, 45, 165, 0.97));
}
.navbar-brand {
margin-right: 20px;
}
.nav-item {
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 80%;
padding: 0 .4rem;
}
.navbar .navbar-nav .nav-link {
transition: all .05s ease-in-out;
}
.navbar-dark .navbar-nav .nav-link.active {
border-bottom: 1px solid white;
}
.navbar-dark .navbar-nav .nav-link:hover {
border-bottom: 1px solid white;
}
.navbar-toggler:hover {
cursor: pointer;
}
#search-bar {
background-color: #5c87af;
color: white;
font-size: 14px;
width: 200px;
height: 30px;
transition: all .2s;
border: none;
}
#search-bar:hover {
background-color: #779ec1;
}
#search-bar:focus {
background-color: white;
color: #212529;
width: 400px;
}
#search-bar::-webkit-input-placeholder {
color: white !important;
}
#search-bar:-moz-placeholder {
/* Firefox 18- */
color: white !important;
}
#search-bar::-moz-placeholder {
/* Firefox 19+ */
color: white !important;
}
#search-bar:-ms-input-placeholder {
color: white !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-dark navbar-expand-sm">
<a class="navbar-brand" href="#">
<img src="/images/MW-logo-white.png" height=28 class="" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-column align-items-start" id="navbar">
<ul class="navbar-nav nav my-1 w-100">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#property-tab">PROPERTY</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#units-tab">UNITS</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tenancies-tab">TENANCIES</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#pdfs-tab">PDFs</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#contacts-tab">CONTACTS</a>
</li>
<form class="form-inline ml-auto">
<input class="form-control search" type="text" id="search-bar" placeholder="Search..." autocomplete="off" spellcheck="false" autocorrect="off" />
</form>
</ul>
<ul class="navbar-nav nav my-1">
<li class="nav-item">
ALL
</li>
<li class="nav-item">
CURRENT
</li>
<li class="nav-item">
PAST
</li>
</ul>
</div>
</nav>

Answer 3

Simply use ml-auto to your search bar class.
Basically Ml is coming under Auto Margins
Another thing which can be applied to single flex items are margins. The following margin classes are available:
mr-auto: add margin to the right side of the item
ml-auto: add margin to the left side of the item
mt-auto: add margin to the top of the item
mb-auto: add margin to the bottom of the item
Here is your code snippet
.navbar {
padding-top: 0;
padding-bottom: 0;
/* box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12), 0 10px 10px rgba(0, 0, 0, 0.03); */
font-weight: 300;
}
.navbar-dark {
background: linear-gradient(to right, rgba(0, 45, 165, 0.97), rgba(10, 88, 157, 0.97), rgba(10, 88, 157, 0.97), rgba(0, 45, 165, 0.97));
}
.navbar-brand {
margin-right: 20px;
}
.nav-item {
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 80%;
padding: 0 .4rem;
}
.navbar .navbar-nav .nav-link {
transition: all .05s ease-in-out;
}
.navbar-dark .navbar-nav .nav-link.active {
border-bottom: 1px solid white;
}
.navbar-dark .navbar-nav .nav-link:hover {
border-bottom: 1px solid white;
}
.navbar-toggler:hover {
cursor: pointer;
}
#search-bar {
background-color: #5c87af;
color: white;
font-size: 14px;
width: 200px;
height: 30px;
transition: all .2s;
border: none;
}
#search-bar:hover {
background-color: #779ec1;
}
#search-bar:focus {
background-color: white;
color: #212529;
width: 400px;
}
#search-bar::-webkit-input-placeholder {
color: white !important;
}
#search-bar:-moz-placeholder {
/* Firefox 18- */
color: white !important;
}
#search-bar::-moz-placeholder {
/* Firefox 19+ */
color: white !important;
}
#search-bar:-ms-input-placeholder {
color: white !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-dark navbar-expand-sm">
<a class="navbar-brand" href="#">
<img src="/images/MW-logo-white.png" height=28 class="" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-column align-items-start" id="navbar">
<ul class="navbar-nav nav my-1 w-100">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#property-tab">PROPERTY</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#units-tab">UNITS</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tenancies-tab">TENANCIES</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#pdfs-tab">PDFs</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#contacts-tab">CONTACTS</a>
</li>
<form class="form-inline ml-auto">
<input class="form-control search" type="text" id="search-bar" placeholder="Search..." autocomplete="off" spellcheck="false" autocorrect="off" />
</form>
</ul>
<ul class="navbar-nav nav my-1">
<li class="nav-item">
ALL
</li>
<li class="nav-item">
CURRENT
</li>
<li class="nav-item">
PAST
</li>
</ul>
</div>
</nav>