Bootstrap NavBar with left, center or right aligned items

Bootstrap NavBar with Left, Center, or Right Aligned Items: A Complete Guide

Are you struggling to create a navigation bar in Bootstrap that has Logo A on the left, menu items in the center, and Logo B on the right? Look no further, as we have a platform-friendly solution just for you! 🚀

The Problem

The current setup you've tried results in Logo A on the left, menu items aligned next to Logo A, and Logo B on the right. Let's dive into the solution to align the elements as desired.

The Solution

To achieve the desired alignment, we'll make a few modifications to your existing code.

1. We'll wrap the menu items and the Logo B element inside another div, which we'll align to the right using the Bootstrap class navbar-right. This will ensure that Logo B stays on the right side of the navigation bar.

<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#about">Menu Item 1</a></li>
    <li><a href="#contact">Menu Item 2</a></li>
    <li><a href="#about">Menu Item 3</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right"> <!-- <--- Add this line -->
    <li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
  </ul>
</div>

1. To center align the menu items along with Logo A, we'll set the parent div of the ul containing the menu items to have the class navbar-center. This class is not provided out-of-the-box by Bootstrap, so we'll need to create it in our custom styles.

Add the following CSS code to create the navbar-center class:

.navbar-center {
  position: absolute;
  width: 100%;
  text-align: center;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

1. Finally, let's assign the newly created navbar-center class to the parent div wrapping the ul containing the menu items:

<div class="collapse navbar-collapse navbar-center"> <!-- <--- Add this line -->
  <ul class="nav navbar-nav"> <!-- ... -->
  </ul>
</div>

With these modifications, your navigation bar will have Logo A aligned to the left, menu items centered, and Logo B aligned to the right. 🎉

Engage With Us!

We hope this guide has helped solve your Bootstrap navigation bar alignment issue. If you have any questions or need further assistance, feel free to leave a comment below. We would love to hear from you! 😊

Don't forget to share this post with your friends and colleagues who might find it useful. Happy coding! 👩‍💻👨‍💻