'Why my Bootstrap 4.6 pills and tabs are not working properly?

I have standard navigations tabs using pills as nav using Bootstrap 4.6. The second pill shows its related tab correctly, but when I try to go back to the first tab it doesn't work anymore. I've read the documentation. It must be something simple.

My HTML:

<div class="row pt-5">
<div class="col-md-3 col-12 areaMenu">
  <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <div class="row">
      <a class="nav-link active btn-secondary btn-lg btn-block rounded-0 col-6 col-md-12" id="v-pills-activacion-tab" data-toggle="pill" href="#v-pills-activacion" role="tab" aria-controls="v-pills-activacion" aria-selected="true">Activación</a>
      <a class="nav-link btn-secondary btn-lg btn-block rounded-0 mt-0 col-6 col-md-12" id="v-pills-programados-tab" data-toggle="pill" href="#v-pills-programados" role="tab" aria-controls="v-pills-programados" aria-selected="false">Programados</a>
    </div>
  </div>
</div>
<div class="col-md-8 col-12 areaContenido">
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-activacion" role="tabpanel" aria-labelledby="v-pills-activacion-tab">
      <h1>Activación</h1>
    </div>
    <div class="tab-pane fade" id="v-pills-programados" role="tabpanel" aria-labelledby="v-pills-programados-tab">
      <span class="float-left font-weight-normal">
        <h5>Elija una fecha</h5>
      </span>
    </div>
  </div>
</div>
javascripthtmljquerytwitter-bootstrap


Solution 1:[1]

To make it work I had to reallocate the nav pill inside a ul element. Bootstrap documentation doesn't mention that it's mandatory to do so.

Solution 2:[2]

What's strange to me is that the following example works in the 4.0 alpha version of bootstrap, but not in latest version of bootstrap 4 (i.e. 4.6)

<div class="row">
    <div class="col m-2 p-4 white-background shadow">
        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item">
                 <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">A</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">B</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">C</a>
                    </li>
                </ul>
            
        <div class="tab-content" id="pills-tabContent">
          <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">Content A</div>
          <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Content B</div>
          <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">Content C</div>
        </div>
    </div>
</div>

Any ideas?

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 Ezequias Lopes
Solution 2 David Robertson

Related Questions