'How to add even space between my bootstrap 4 navbar elements

I want my elements to be evenly spaced in the navbar, I tried other post that already had this but it won't work.

<nav class= "navbar navbar-expand-lg navbar-dark bg-dark" >
        
            <div class= "container-fluid" >
                <button class= "navbar-toggler" type= "button" data-bs-toggle= "collapse" data-bs-target= "#navbar">
                    <span class= "navbar-toggler-icon"/>
                </button>
                <div  class= "collapse navbar-collapse" id= "navbar">
                    <div class= "navbar-nav">
                        <a class= "nav-item nav-link" href= "/home">Home</a>
                        
                        <a class= "nav-item nav-link" href= "/about">About</a>
                        
                        <a class= "nav-item nav-link" href= "/contact">Contact</a>
                        
                    </div>
                </div>
            </div>
htmlcssbootstrap-4


Solution 1:[1]

Bootstrap 4 has spacing and flex options for NavBars

navbar-nav only uses enough width to fit its items. It needs to be wider to accommodate flex spacing options.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">

    <!-- Modify this -->
    <div class="navbar-nav justify-content-between w-100">

      <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 fnostro

Related Questions