'nav-fill not working at all, even the copy pasted starter code from bootstrap docs doesn't work

I have tried looking up how to use nav-fill to make the nav-pills extend the width of the card, but this function doesn't work at all for me. Even the copy pasted code from the documentation doesn't work. It displays the buttons but doesn't apply the nav-fill. Here is my code below:

      <div class="card text-center">
        <div class="card-header">
          <ul class="nav nav-tabs nav-pills nav-fill mb-3" id="pills-tab" role="tablist">
            <li class="nav-item" role = "presentation">
              <a class="nav-item nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</a>
            </li>
            <li class="nav-item" role = "presentation">
              <a class="nav-item nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
            </li>
            <li class="nav-item" role = "presentation">
              <a class="nav-item nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-item nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>

          <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
          </div>
        </div>
        <div class="card-body">
          <h5 class="card-title">Special title treatment</h5>
          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
htmlcssbootstrap-4nav-pills


Sources

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

Source: Stack Overflow

Solution Source

Related Questions