navbar spacing using HTML, CSS and Bootstrap

Question

I have the following code:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><img src="./images/kiratina_logo.png" alt="logo" /></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 mr-auto">
        <!-- Use mr-auto here -->
        <li class="nav-item">
          <a class="nav-link" href="#">Why Water</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Our Work</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About Us</a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <!-- Use ml-auto here -->
        <li class="nav-item">
          <a class="nav-link" href="#">Donate</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

am trying to center the logo on the navbar but am stack here at the list because I want to create a space between the ul class navbar-nav mr-auto and the ul class navbar-nav ml-auto, how can I go about it because am really stack and I need the navbar complete like yesterday.

am trying to center the logo on the navbar but am stack here at the list because I want to create a space between the ul class navbar-nav mr-auto and the ul class navbar-nav ml-auto, how can I go about it because am really stack and I need the navbar complete like yesterday.

Answer 1

If you want the navigation items and logo centered only on desktop:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
    <a class="navbar-brand" href="#"><img src="./images/kiratina_logo.png" alt="logo" /></a>
      <ul class="navbar-nav">
        <!-- Use mr-auto here -->
        <li class="nav-item">
          <a class="nav-link" href="#">Why Water</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Our Work</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About Us</a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <!-- Use ml-auto here -->
        <li class="nav-item">
          <a class="nav-link" href="#">Donate</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Centered on mobile too:

.navbar-brand {
  display: block;
  text-align: center;
}

.nav-item {text-align: center;}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
      <a class="navbar-brand" href="#"><img src="./images/kiratina_logo.png" alt="logo" /></a>
      <ul class="navbar-nav">
        <!-- Use mr-auto here -->
        <li class="nav-item">
          <a class="nav-link" href="#">Why Water</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Our Work</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About Us</a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <!-- Use ml-auto here -->
        <li class="nav-item">
          <a class="nav-link" href="#">Donate</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

You can add a margin to the right of the navbar-brand element as much as you need in order to create space between logo and navigation.