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

Adding Two Rows

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.

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

Adding Navigation Links

Now that we have two rows, we can add the navigation links to them. We'll create two ul elements, one for each row.

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

Result

Here is the resulting navbar with two rows:

  Navbar
  
    
  

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

The above is the detailed content of How Do I Create a Two-Row Navbar Using Bootstrap 4?. For more information, please follow other related articles on the PHP Chinese website!