CODEWITHSUNDEEP
htmlcssbootstrap-4
Michael00008
Michael00008

Reputation: 23

How to move Navbar Elements to the center?

I want to move 'Try again' between 'New Colors' and 'Easy' to the center. I already tried using flex and other things but I can't figure it out. I want to make it responsive as well.

<nav class="navbar navbar-expand navbar-light">
  <div class="container">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-md-5 pl-md-5">
        <li class="nav-item">
          <a class="nav-link" href="#"
            >NEW COLORS <span class="sr-only">(current)</span></a
          >
        </li>
      </ul>
      <ul class="navbar-nav d-flex">
        <li class="nav-item">
          <a class="nav-link" href="#"
            >Try Again <span class="sr-only">(current)</span></a
          >
        </li>
      </ul>
      <ul class="navbar-nav ml-auto pr-md-5 mr-md-5">
        <li class="nav-item">
          <a class="nav-link" href="#"
            >EASY <span class="sr-only">(current)</span></a
          >
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">HARD</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Upvotes: 1

Views: 307

Answers (1)

yinsweet
yinsweet

Reputation: 2851

Add in d-flex and justify-content-between class in id="navbarSupportedContent" <div>. Then remove ml-auto class in the last navbar-nav <ul>. Then, the nav item will be align left, center and right.

<div class="collapse navbar-collapse d-flex justify-content-between" id="navbarSupportedContent">
     ...
<ul class="navbar-nav pr-md-5 mr-md-5"> <!-- Remove ml-auto -->


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<nav class="navbar navbar-expand navbar-light">
  <div class='container'>
    <!-- Add in d-flex and justify-content-between -->
    <div class="collapse navbar-collapse d-flex justify-content-between" id="navbarSupportedContent">
      <ul class="navbar-nav ml-md-5 pl-md-5">
        <li class="nav-item">
          <a class="nav-link" href="#">NEW COLORS <span class="sr-only">(current)</span></a>
        </li>
      </ul>
      <ul class="navbar-nav"> <!-- Remove d-flex -->
        <li class="nav-item">
          <a class="nav-link" href="#">Try Again <span class="sr-only">(current)</span></a>
        </li>
      </ul>
      <ul class="navbar-nav pr-md-5 mr-md-5"> <!-- Remove ml-auto -->
        <li class="nav-item">
          <a class="nav-link" href="#">EASY <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">HARD</a>
        </li>
      </ul>
    </div>
</nav>
</div>

Upvotes: 1

Related Questions