How to Create a Two-Row Bootstrap 4 Navbar?

Creating a Bootstrap 4 Navbar with Two Rows

Setting up a Bootstrap 4 navbar with two rows is straightforward, allowing for versatile arrangements on your web page. To achieve this, utilize the flexbox utility class flex-column on the navbar-collapse div, ensuring that the child elements align vertically.

1. Add the flex-column Class:

   Wrap the navbar-collapse div with the flex-column class to achieve vertical alignment.

   <div class="collapse navbar-collapse flex-column ml-lg-0 ml-3">

2. Optional Alignment and Padding:

   If desired, add additional alignment and padding to enhance the visual appearance. For instance, to right-align the text and add some vertical padding to the social media icons:

   <ul class="navbar-nav flex-row mb-2">
       <li class="nav-item">
           <a class="nav-link py-1 pr-3" href="#">
               <i class="fa fa-facebook"></i>
           </a>
       </li>
       ...
   </ul>

3. Additional Variations:

   Experiment with alternative layouts, such as a navbar with two rows on the right or a right-aligned search form.

Demo and Code:

Here's a demo and the corresponding code for a navbar with two rows:

• [Demo](https://jsfiddle.net/lot99)
• [Code](https://codepen.io/anon/pen/VEPqpe?editors=1010)
  

Note:

In Bootstrap 4.0.0 and above, ensure to use the updated code as per the provided links for compatibility.

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