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">
   <li>
   <p><strong>Optional Alignment and Padding:</strong></p>
   <p>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:</p>
   <pre class="brush:php;toolbar:false">

   ...

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