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/[email protected]/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
        
<nav >
      <div >
            <a  href="#">Navbar</a>
                <div >
              <a  href="#">Home</a>
              <a  href="#">Features</a>
              <a  href="#">Pricing</a>
              <a  href="#">Disabled</a>
       </div>
   </div>
</nav>



 

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<nav >
  <div >
    <a  href="#">Navbar</a>
    <div >
      <a  href="#">Home</a>
      <a  href="#">Features</a>
      <a  href="#">Pricing</a>
      <a  href="#">Disabled</a>
    </div>
  </div>
</nav>