How can I add space to each button in bootstrap navbar-CodePudding

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 >
<div >
    <a  href="">
        <h3>Brand</h3>
    </a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span ></span></button>
    <div  id="navbarSupportedContent">
        <ul >
            <li ><a  aria-current="page" 
            href="{% url 'About' %}">About</a></li>
            <li ><a  
                href="{% url 'login' %}">Log in</a></li>
            <li ><a  
                href="{% url 'register' %}">Sign Up</a></li>  
        </ul>
    </div>
</div>

CodePudding user response：

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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

<nav >
  <div >
    <a  href="">
      <h3>Brand</h3>
    </a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span ></span></button>
    <div  id="navbarSupportedContent">
      <ul >
        <li ><a  aria-current="page" href="{% url 'About' %}">About</a></li>
        <li ><a  href="{% url 'login' %}">Log in</a></li>
        <li ><a  href="{% url 'register' %}">Sign Up</a></li>
      </ul>
    </div>
  </div>