Bootstrap Navbar Logo Center

If you are using Bootstrap for building your website, creating a navbar with a centered logo is a common requirement. In this guide, we will explore a simple and effective way to achieve this using Bootstrap.

Step 1: HTML Markup

First, we need to create the HTML markup for the navbar with a logo in the center. Here's a sample code snippet:

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand mx-auto" href="#">
    <img src="logo.png" alt="Logo">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <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 Us</a>
      </li>
    </ul>
  </div>
</nav>

In this code snippet, we have added the mx-auto class to the navbar-brand element, which will center the logo horizontally.

Step 2: Custom CSS

Next, we need to add some custom CSS to center the logo vertically. Here's a sample CSS code snippet:

.navbar-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

In this code snippet, we have used absolute positioning to center the logo horizontally and the translateX(-50%) property to shift it left by half of its width, thus fully centering it.

Step 3: Adding your logo

Finally, replace the logo.png file with your own logo file, and adjust the logo dimensions as per your requirements.

Conclusion

With these few simple steps, you can create a navbar with a centered logo in Bootstrap. By adjusting the HTML markup and CSS styles, you can customize the navbar further to match your website's theme and branding guidelines.