5

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">
        <a href="#" class="nav-link active">ALL</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">CURRENT</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">PAST</a>
      </li>
    </ul>
  </div>
</nav>
Community
  • 1
  • 1
Redtama
  • 1,603
  • 1
  • 18
  • 35

3 Answers3

3

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">
        <a href="#" class="nav-link active">ALL</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">CURRENT</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">PAST</a>
      </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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
1

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">
        <a href="#" class="nav-link active">ALL</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">CURRENT</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">PAST</a>
      </li>
    </ul>
  </div>
</nav>
Community
  • 1
  • 1
Anzil khaN
  • 1,974
  • 1
  • 19
  • 30
1

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">
        <a href="#" class="nav-link active">ALL</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">CURRENT</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">PAST</a>
      </li>
    </ul>
  </div>
</nav>
Lakindu Gunasekara
  • 4,221
  • 4
  • 27
  • 41