How can I create a two-row navbar in Bootstrap 4?-CSS Tutorial-php.cn

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

Susan Sarandon

Release： 2024-12-10 00:55:10

Original

260 people have browsed it

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:

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

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

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!

source：php.cn

Previous article：How to Create a Two-Column Unordered List Using CSS and JavaScript? Next article：How to Simulate CSS `background-size: cover` Using Canvas?

Statement of this Website

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