How can I create a two-row navbar in Bootstrap 4?

Bootstrap 4 navbar with 2 rows

In Bootstrap 4, it's possible to create a navbar with two rows by using the flexbox utility classes. Here's how you can achieve this:

1. Add the flex-column class to the .navbar-collapse div. This will stack the two navbars vertically.

2. Set the flex-direction: column property on the .navbar-brand element. This will align the logo vertically with the navbar links.

3. Optionally, you can add the flex-row class to the second navbar to align the icons horizontally.

Here's an updated version of your code:

    

        
            
        
        
        
The above is the detailed content of How can I create a two-row navbar in Bootstrap 4?. For more information, please follow other related articles on the PHP Chinese website!
bootstrap using class Property this column flex ul
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Create a Two-Column Unordered List Using CSS and JavaScript?Next article：How to Create a Two-Column Unordered List Using CSS and JavaScript?

Related articles

See more

• Css line-height calculation
• CSS style selector
• CSS compatibility and BUG handling
• How to use CSS to layout quickly—layout elements in detail
• Things about color in css (legal color values)