To center the Bootstrap navigation bar items horizontally, the Flexbox method is recommended. 1. Add the mx-auto class to .navbar-nav to center the navigation bar content horizontally in the container and ensure that the parent element width is sufficient; 2. Or set .navbar-nav to flex layout through custom CSS and use justify-content: center to achieve center; 3. Pay attention to keeping the container width full of one row, avoid multiple .navbar-nav interference, and handle the mobile folding menu style separately to ensure compatibility.

There are actually several ways to make the items in the navigation bar center horizontally in Bootstrap. The core idea is to use CSS to control the layout, and Bootstrap itself also provides some auxiliary classes to simplify operations.

Use Flexbox properties (recommended)

Bootstrap's navigation bar uses Flexbox layout by default, so centering can be easily achieved by adding some alignment classes.

• Add mx-auto to .navbar-nav : This will center the entire navigation bar content horizontally in the container.
• Also make sure that the parent element of the navigation bar (such as .collapse ) is wide enough to support the centering effect.

The sample code is as follows:

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mx-auto">
        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">About us</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

This method works for most modern versions of Bootstrap (especially v4 and v5) without the need for additional CSS writing.

Custom CSS centered

If you want to control styles more flexibly, or the above method does not apply (such as you use a custom structure), you can directly implement it through CSS.

• Set display: flex; justify-content: center; for .navbar-nav ;
• If you need stronger compatibility, you can also add text-align: center on the parent container

Example CSS:

 .navbar-nav {
  display: flex;
  justify-content: center;
  width: 100%;
}

The advantage of this method is that you can control spacing, responsive behavior, etc., but the disadvantage is that you need to introduce additional stylesheets or <style></style> tags.

Notes and FAQs

Sometimes even if the centering attribute is added, it has no effect, which may be because:

• The content container of the navigation bar does not occupy the full line width (for example, missing w-100 or width: 100% )
• When multiple .navbar-nav coexist, it is recommended to keep only one main menu
• The folding menu under the mobile terminal does not apply the style correctly, and you need to set the width or alignment for .navbar-collapse separately.

Basically these methods. The key is to use Flexbox well. Bootstrap has encapsulated many tool classes, and appropriate combinations can quickly achieve centering effect.

The above is the detailed content of How to center navbar items in Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!