[FIXED] How can I add space to each button in bootstrap navbar

Issue

Is anybody can show me how to add space between each and every button in this Navigation Bar. I want to separate them to look like This one I'm using bootstrap 5.

 <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm bg-body">
<div class="container">
    <a class="navbar-brand" href="">
        <h3>Brand</h3>
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            <li class="nav-item"><a class="btn btn-primary shadow-sm" aria-current="page" 
            href="{% url 'About' %}">About</a></li>
            <li class="nav-item"><a class="btn btn-primary shadow-sm" 
                href="{% url 'login' %}">Log in</a></li>
            <li class="nav-item"><a class="btn btn-primary shadow-sm" 
                href="{% url 'register' %}">Sign Up</a></li>  
        </ul>
    </div>
</div>

Solution

To space elements we add margin between them. We'll do it only when navbar is horizontal so to not affect mobile menu. (We also add some bottom margin to space them for mobile)

@media (min-width: 992px) {
  .navbar-nav li {
    margin-left: 5px;
  }
}

  .navbar-nav li {
    margin-bottom: 5px;
  }

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm bg-body">
  <div class="container">
    <a class="navbar-brand" href="">
      <h3>Brand</h3>
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="btn btn-primary shadow-sm" aria-current="page" href="{% url 'About' %}">About</a></li>
        <li class="nav-item"><a class="btn btn-primary shadow-sm" href="{% url 'login' %}">Log in</a></li>
        <li class="nav-item"><a class="btn btn-primary shadow-sm" href="{% url 'register' %}">Sign Up</a></li>
      </ul>
    </div>
  </div>

Answered By - IT goldman

Answer Checked By - Robin (PHPFixing Admin)