Home >Web Front-end >CSS Tutorial >How can I create a two-row navbar in Bootstrap 4?

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

Susan Sarandon
Susan SarandonOriginal
2024-12-10 00:55:10335browse

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.

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

  1. 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:

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <h1 class="py-2 ml-lg-2 mx-3"></h1>
</div></nav>

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!

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