bootstrap tabs pills not working on reverse order

Question

I have created a layout with Bootstrap 4 pills. It is working fine on first time click and it is not working on second time. Suppose if we click on the menu1, menu2, menu3 on a sequence - tab content is loading, and again if I click the menu1 - tab content is not changing. I have done some mistake, but I am a little bit confused to achieve this scenario. I want the design as it is shown below.

Can anyone please correct my mistake, that is great help to me. Thanks in advance, below is my snippet, please view my result in the full window to check my layout design

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12 mb-4">
        <div class="">
          <div class="nav nav-pills row">
            <div class="nav-item col-md-1">
              <a class="nav-lin active btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu1">Menu 1</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu2">Menu 2</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu3">Menu 3</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu4">Menu4 4</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu5">Menu 5</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu6">Menu 6</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu7">Menu 7</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu8">Menu 8</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu9">Menu 9</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu10">Menu 10</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu11">Menu 11</a>
            </div>
            <div class="nav-item col-md-1">
              <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu12">Menu 12</a>
            </div>
          </div>
        </div>  
      </div>  
    </div>  
    <div class="row">
      <div class="col-md-1">
        <div class="nav nav-pills">
            <div class="row">
              <div class="nav-item col-md-1 mb-4">
                <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu13">Menu 13</a>
              </div>
            </div>  
            <div class="row">
              <div class="nav-item col-md-1 mb-4">
                <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu14">Menu 14</a>
              </div>
            </div>  
            <div class="row">
              <div class="nav-item col-md-1 mb-4">
                <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu15">Menu 15</a>
              </div>
            </div>  
        </div>    
      </div>
      <div class="col-md-10">
        <div class="card">
          <div class="card-body">
            <div class="tab-content">
              <div class="tab-pane container active" id="menu1">1</div>
              <div class="tab-pane container fade" id="menu2">2</div>
              <div class="tab-pane container fade" id="menu3">3</div>
              <div class="tab-pane container fade" id="menu4">4</div>
              <div class="tab-pane container fade" id="menu5">5</div>
              <div class="tab-pane container fade" id="menu6">6</div>
              <div class="tab-pane container fade" id="menu7">7</div>
              <div class="tab-pane container fade" id="menu8">8</div>
              <div class="tab-pane container fade" id="menu9">9</div>
              <div class="tab-pane container fade" id="menu10">10</div>
              <div class="tab-pane container fade" id="menu11">11</div>
              <div class="tab-pane container fade" id="menu12">12</div>
              <div class="tab-pane container fade" id="menu13">13</div>
              <div class="tab-pane container fade" id="menu14">14</div>
              <div class="tab-pane container fade" id="menu15">15</div>
              <div class="tab-pane container fade" id="menu16">16</div>
              <div class="tab-pane container fade" id="menu17">17</div>
              <div class="tab-pane container fade" id="menu18">18</div>
            </div>
          </div>  
        </div>  
      </div>
      <div class="col-md-1">
        <div class="nav nav-pills">
            <div class="row">
              <div class="nav-item col-md-1 mb-4">
                <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu16">Menu 16</a>
              </div>
            </div>  
            <div class="row">
              <div class="nav-item col-md-1 mb-4">
                <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu17">Menu 17</a>
              </div>
            </div>  
            <div class="row">
              <div class="nav-item col-md-1 mb-4">
                <a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu18">Menu18</a>
              </div>
            </div>  
        </div> 
      </div>  
    </div>  
  </div>

Answer 1

The examples in the documentation show that the structure with .nav-item wrapper above .nav-link works only in cases where the nav is hosted on <ul>. If the navigation is created with custom structure, the tabs/navs/pills need to be direct children to the .nav parent.

In your scenario you either have to reimplement it using <ul> or you need to remove the divs between your .nav and its inner .nav-link elements.

You also have a typo - the nav-lin should be nav-link. Actually, this does not affect your layout, because you have added .btn class to the same elements.

Here is your code with the fixed typo and removed wrapper divs inside the navigation elements:

    <div class="container-fluid">
    <div class="row">
      <div class="col-md-12 mb-4">
        <div class="">
          <div class="nav nav-pills row">
            <a class="nav-link active btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu1">Menu 1</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu2">Menu 2</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu3">Menu 3</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu4">Menu4 4</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu5">Menu 5</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu6">Menu 6</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu7">Menu 7</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu8">Menu 8</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu9">Menu 9</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu10">Menu 10</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu11">Menu 11</a>
            <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu12">Menu 12</a>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-1">
        <div class="nav nav-pills">
          <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu13">Menu 13</a>
          <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu14">Menu 14</a>
          <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu15">Menu 15</a>
        </div>
      </div>
      <div class="col-md-10">
        <div class="card">
          <div class="card-body">
            <div class="tab-content">
              <div class="tab-pane container active" id="menu1">1</div>
              <div class="tab-pane container fade" id="menu2">2</div>
              <div class="tab-pane container fade" id="menu3">3</div>
              <div class="tab-pane container fade" id="menu4">4</div>
              <div class="tab-pane container fade" id="menu5">5</div>
              <div class="tab-pane container fade" id="menu6">6</div>
              <div class="tab-pane container fade" id="menu7">7</div>
              <div class="tab-pane container fade" id="menu8">8</div>
              <div class="tab-pane container fade" id="menu9">9</div>
              <div class="tab-pane container fade" id="menu10">10</div>
              <div class="tab-pane container fade" id="menu11">11</div>
              <div class="tab-pane container fade" id="menu12">12</div>
              <div class="tab-pane container fade" id="menu13">13</div>
              <div class="tab-pane container fade" id="menu14">14</div>
              <div class="tab-pane container fade" id="menu15">15</div>
              <div class="tab-pane container fade" id="menu16">16</div>
              <div class="tab-pane container fade" id="menu17">17</div>
              <div class="tab-pane container fade" id="menu18">18</div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-1">
        <div class="nav nav-pills">
          <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu16">Menu 16</a>
          <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu17">Menu 17</a>
          <a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu18">Menu18</a>
        </div>
      </div>
    </div>
  </div>