How to Center Content in a Bootstrap 3 Navbar?

Centering Content in Responsive Bootstrap Navbar

Question:

Despite exploring numerous solutions online, you're having trouble centering content in your Bootstrap 3 navbar. Can you assist with CSS or methods that align the content accordingly while maintaining code compatibility?

Sample Code:

<nav class="navbar navbar-default" role="navigation">
  <!--- ... -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <!--- ... -->
    </ul>
  </div>
</nav>

Answer:

Method:

To center the content, modify the CSS of the .navbar .navbar-nav and .navbar .navbar-collapse classes as follows:

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

Explanation:

These changes enable you to:

• Remove the default float: left property from .navbar .navbar-nav, allowing the items to align side-by-side.
• Set display: inline-block; to make the nav items inline elements, maintaining proper spacing.
• Center the text within the navbar using text-align: center; on .navbar .navbar-collapse.

Additional Notes:

• If you only want this centering effect on larger screens, surround the CSS in a media query, targeting the appropriate screen size.
• Play around with the CSS to fine-tune the exact placement of the content.

The above is the detailed content of How to Center Content in a Bootstrap 3 Navbar?. For more information, please follow other related articles on the PHP Chinese website!