How can I give spacing to each and every buttons in the bootstrap 5 navbar, as you can see here, each and every buttons is closer to itself, but I don’t like that, so how can I gives these buttons a space?

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
        
<nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
                <div class="navbar-nav">
              <a class="nav-item btn btn-primary" href="#">Home</a>
              <a class="nav-item btn btn-primary" href="#">Features</a>
              <a class="nav-item btn btn-primary" href="#">Pricing</a>
              <a class="nav-item btn btn-primary" href="#">Disabled</a>
       </div>
   </div>
</nav>



 

>Solution :

Add Bootstrap classes mx-lg-2 mx-0 my-lg-0 my-2 to all buttons.

Explanation:

• mx-lg-2 mx-0 will add left and right margins on screens ≥ 992px
• my-lg-0 my-2 will add top and bottom margins on screens < 992px

See the snippet below.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="navbar-nav">
      <a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Home</a>
      <a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Features</a>
      <a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Pricing</a>
      <a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Disabled</a>
    </div>
  </div>
</nav>