How Do I Create a Two-Row Navbar Using Bootstrap 4?

Bootstrap 4 Navbar with Two Rows

In this Bootstrap 4 tutorial, we'll show you how to create a navbar with two rows. This is a common design pattern for websites that have a lot of navigation options or want to separate different types of navigation.

Prerequisites

To follow along, you'll need:

• A basic understanding of HTML and CSS
• Bootstrap 4 installed on your system

Creating the Navbar

1. Start by creating a new HTML file.
2. Add the following code to your file to create the basic navbar structure:

<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="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse">
<h3 id="Adding-Two-Rows">Adding Two Rows</h3>
<p>To add two rows to the navbar, we'll use the flex-column class on the navbar-collapse div. This will cause the child elements of the navbar-collapse div to stack vertically.</p>
<pre class="brush:php;toolbar:false"><div class="collapse navbar-collapse flex-column">
<h3 id="Adding-Navigation-Links">Adding Navigation Links</h3>
<p>Now that we have two rows, we can add the navigation links to them. We'll create two ul elements, one for each row.</p>
<pre class="brush:php;toolbar:false"><div class="collapse navbar-collapse flex-column">
<h3 id="Result">Result</h3>
<p>Here is the resulting navbar with two rows:</p>
<pre class="brush:php;toolbar:false"><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="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse flex-column"></div></nav>