Bootstrap navigation menu

user_17851797 0
Viewed 50

I am new to Bootstrap and am trying to build a three-column navigation menu with the nav-links centered in the middle. I could build this in five minutes using grids or flexbox but for the life of me, I can't center the nav-links!!! picture for reference.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img src="/resources/images/Babyboom_logo_main.png" width="200" height="50"  alt="BabyBoom logo" class="navbar-brand">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <col>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
    <a class="nav-link" href="#">Sessions</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">Contact</a>
</li>
</ul>
<div class="col-sm">
<a class="btn btn-primary float-right" href="#" role="button">Book Now</a>
</div>
</div>
</nav>

bootstrap-4 css html javascript
2 Answers

try using mx-auto. The bellow code should work for you:)

<html>
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1">
              <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
              <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
              <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
              <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" ></script>
              <div class="row ">
                 <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <img src="/resources/images/Babyboom_logo_main.png" width="200" height="50"  alt="BabyBoom logo" class="navbar-brand">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="col-md-9 ">
                       <div class="collapse navbar-collapse" id="navbarSupportedContent">
                          <ul class="col-md-3 navbar-nav mx-auto">
                             <li class="nav-item">
                                <a class="nav-link" href="#">Sessions</a>
                             </li>
                             <li class="nav-item">
                                <a class="nav-link" href="#">Contact</a>
                             </li>
                          </ul>
                       </div>
                    </div>
                    <div class="col-md-2">
                       <a class="btn btn-primary float-right" href="#" role="button">Book Now</a>
                    </div>
              </div>
              </div>
              </nav>
              <!-- end snippet -->
</html>
user_59544520

You can do it in two ways

  1. By adding mx-auto class to ul tag i.e

        <ul class="col-md-3 navbar-nav mx-auto">

  2. By adding justify-content-center to the collapse div

     <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">

Hope it work for you :)

user_168334150
Related