CODEWITHSUNDEEP
htmlcssfrontendbootstrap-5
Hanee Solanki
Hanee Solanki

Reputation: 23

How do I make the navbar elements on the same line and on the same height?

I am creating a navbar for my page with the help of bootstrap. I have used <li> tags but I am not sure why the items are not quite on the same line. Please review the below code:

  <nav class="navbar navbar-expand-lg">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">HOME</a>
            </li>
            <li class="nav-item">
                <i class="fa-solid fa-chevron-right"></i>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">CATEGORY   </a>
            </li>  
        </ul>
    </nav>

Here's the screenshot of my output:

enter image description here

Upvotes: 0

Views: 363

Answers (1)

Musiur Alam Opu
Musiur Alam Opu

Reputation: 335

Use flex box.

For example you have to make navbar which have logo, links, menu Icon

So,

<nav class="d-flex justify-content-between align-items-center">
  <div> logo </div>
  <div> 
   <ul class="d-flex justify-content-between align-items-center">
     <li>link1</li>
     <li>link1</li>
     <li>link1</li>
   </ul>
  </div>
</nav>

For, further more clarification visit: https://getbootstrap.com/docs/4.0/utilities/flex/

Upvotes: 2

Related Questions