Creating a modern Bootstrap 4 navigation bar featuring two rows and a sleek inline form

I've tried experimenting with code from similar questions, but I'm still stuck! I've managed to get 2 flex rows in a flex column with the brand image vertically centered, but I'm struggling with the horizontal spacing.

On the first row of my navbar, I have a list of nav-items and an inline form with a search bar. I want the search bar to be right-aligned while keeping the nav-items left-aligned.

I've tried using justify-content-between and mx-auto classes, but I can't seem to separate the nav-items and search bar horizontally while keeping them on the same row!

Here's my code:

.navbar {
  padding-top: 0;
  padding-bottom: 0;
  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>

csstwitter-bootstrapflexboxbootstrap-4navbar

Answer №1

To ensure both navbar-nav elements are full width, you can simply add the w-100 class to each...

<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>

By applying the ml-auto class, the form will be pushed to the right as intended.

Question on a similar topic:
Bootstrap 4 navbar with 2 rows

Answer №2

To achieve this specific layout, you only need to apply two classes.

1 - Insert w-100 within 

<ul class="navbar-nav nav my-1">

2 - Add ml-auto to 

<form class="form-inline">

Check out the live demonstration below:

.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>

Answer №3

To align your search bar to the right, simply add the class ml-auto.

The class 'ml' stands for Auto Margins, which can be used to apply margins to single flex items. There are several margin classes available:

mr-auto: adds margin to the right side of the item

ml-auto: adds margin to the left side of the item

mt-auto: adds margin to the top of the item

mb-auto: adds margin to the bottom of the item

Here is the code snippet for reference:

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular encountering issues with loading external JavaScript files due to the error: ENOENT - indicating that the specified file or directory does

I am attempting to incorporate a bootstrap template into Angular. The template requires some external JavaScript and CSS files that need to be linked. I have placed these files in the assets folder and referenced them in the styles and scripts arrays of an ...

jquerycssangularbootstrap-4external-js

Stop header background image from loading on mobile browsers by utilizing the <picture> tag

Is there a method to utilize the <picture> element in order to prevent a page from downloading an image when viewed on a mobile phone? I have a website that features a header image. Unfortunately, due to the site's functionality, using CSS (bac ...

htmlcssimage

What is the best way to eliminate the underline in a text hyperlink?

I've encountered an issue with my CSS file. I tried using the code below: text-decoration: none; However, the text is not displaying as expected. I had to resort to using JavaScript for adding a hyperlink behind the text, which I believe is causing ...

jqueryhtmlcssmouseoverunderline

There seems to be an issue with the functionality of the Bootstrap Modal

I've been working on incorporating bootstrap login Modal functionality into my code, but for some reason, the screen is not displaying it. Here's what shows up on the screen: https://i.sstatic.net/UIU2w.png The red box in the image indicates whe ...

javascripthtmlcssbootstrap-4

Personalizing the design of Bootstrap

As a beginner in working with Bootstrap, I am currently focused on creating an index html page for an online shop. For reference, here is an example - https://jsfiddle.net/a393wtng/1/ Upon resizing the output frame, it becomes apparent that 4 products can ...

htmlcsstwitter-bootstrap

Disabling $routeprovider while implementing bootstrap

I am encountering an issue with my normal routeprovider code. In a specific section of my HTML, I have some Twitter Bootstrap expand/collapse sections which inadvertently trigger the routeprovider when clicked. Is there a way to prevent this from happening ...

javascriptangularjstwitter-bootstrap

Trouble with CSS styling arising when launching the MVC application on IIS

Currently working on a website in ASP.Net MVC 5. I am trying to test it on my local IIS (version 8), but encountering an issue where the CSS styling is not being applied. In my _layout.cshtml file, I opted for direct link tags instead of using bundles. &l ...

cssasp.net-mvciis

Enhance the responsiveness of your Bootstrap 4 navbar on mobile devices by incorporating animation effects without

Is there a way to incorporate animation into the drop-down feature of Bootstrap 4 on mobile layout without using jQuery? I've tried using the transition property with height set to 1s and 'all', but with no success. Any assistance would be ...

bootstrap-4

Excessive padding issues arising from Bootstrap 4 columns and rows

Utilizing bootstrap to structure columns and rows for my images is causing excessive padding around them, deviating from the intended design: https://i.sstatic.net/8cQVg.png Here's the HTML structure I employed: <!-- header --> <header> ...

htmlcssbootstrap-4

Swap out symbols for pictures

To display the 3 icons, I am using https://boxicons.com/. You can find the code here. Additionally, I would like to download the icons and store them in a folder. Here is the result with uploaded images: https://i.sstatic.net/Qsu9k.png I encountered two ...

css

When I forget to use var_dump, PHP fails to load scripts

When I am building CSS links using a function, the CSS doesn't work unless I add a var_dump at the end. What could I be missing or overlooking? Here is the code snippet: private function buildCssLinks(){ $files = $this->findFiles(dirname(d ...

phpcssclass

The pseudo element 'not' in CSS is currently not functioning as expected when applied to an anchor tag

When working with CSS, I encountered an issue while trying to apply a pseudo element on hover and active states of anchor tags. Unfortunately, my code was not producing the desired outcome. a:not(a[name="nobgcolor"]):hover{color:#ffff35;background-color:# ...

css

Extract the image URL from the href attribute using Xpath

My goal is to extract all images enclosed in href attributes from the given code snippet <div class="jcarousel product-imagethumb-alt" data-jcarousel="true"> <ul> <li> <a href="https://domain/imagefull.jpg" onclick="return false;" cla ...

javascripthtmlcssxpath

Achieving equal height for the englobing/parent div and the inner divs

To achieve a standard left, middle, and right column layout, it is necessary for me to enclose various inner divs of different heights within a surrounding/parent div. It is crucial that the parent div adjusts its height to match the tallest inner div, whi ...

csshtml

I have multiple div containers on my webpage, and I'm looking for a way to dynamically load data into a specific div without having to refresh the entire page using PHP and Code

Is there a way to load data into only the second div tag when clicking on a link, without refreshing the entire page? I want to ensure that the first and third div tags remain static while allowing the second div tag to be dynamic. <div class="first" ...

phpjquerycssajaxcodeigniter

Adjust the header width and column alignment when freezing the header in a gridview interface

Looking to implement a gridview with a fixed header? I've tried various solutions including this link and this one. While I've managed to get it working, the main issue lies in the alignment of header width and column width. The scroll and freez ...

htmlcssasp.netgridview

Resizing popups upon button activation

Hey there! I have a popup with a button that reveals random text containing between 0 to 32 words when clicked. The issue is, the popup keeps resizing based on the length of the text, causing the button to move around. Is there a way I can keep the button ...

javascripthtmlcssgoogle-chrome-extension

Experimenting with media queries but struggling to make them function properly

I am relatively new to CSS and I am experimenting with media queries. Despite following advice on various Stackoverflow posts and other websites, I am unable to make them work. My goal is simple - to change the color of boxes when the screen width falls be ...

htmlcssmedia-queries

Discovering Characters in String using jQuery and Implementing a Personalized Class

Update: To achieve the desired typography, I will need to implement some creative jquery / css techniques. The first step is to create a class called .underlined which will allow me to have complete control over the underline by setting a background imag ...

jquerycssregexstring

Adjust the size of the font based on the screen resolution

What is the best way to adjust font size based on screen resolution so that text remains as a single line when the screen is small? For example: http://prntscr.com/2qa9ze <div class="centerbreaking"> <section id="breaking-news"> <div id ...

htmlcsstext