Вертикальные вкладки с вложенными вкладками Bootstrap

Question

Я создал вертикальные вкладки с Bootstrap, в настоящее время "домашняя вкладка" не показывает содержимое вкладок, что-то вроде глючного. Кроме того, у меня возникают проблемы при создании вложенных вкладок для каждой отдельной вертикальной навигации. Легче ли создавать вложенные вкладки с jQuery?

HTML

          <nav class="navigation">
            <ul class="menu nav-menu">
             <div class="nav nav-tabs flex-column" id="nav-tab" role="tablist">
               <li class="menu-item-has-children"><a class=" nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a></li>

               <li class="menu-item menu-item-has-children"><a class=" nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a></li>
               <li class="menu-item menu-item-has-children"><a class=" nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a></li>
               <li class="menu-item menu-item-has-children"><a class=" nav-link" id="nav-about-tab" data-toggle="tab" href="#nav-about" role="tab" aria-controls="nav-about" aria-selected="false">About</a></li>
             </div>
           </ul>
         </nav>
        </div>
          <div class="col-lg-9 col-md-12 col-sm-12 col-12">
            <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
              home
            </div>
            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
            profile
            </div>
            <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
            contact
            </div>
            <div class="tab-pane fade" id="nav-about" role="tabpanel" aria-labelledby="nav-about-tab">
            about
            </div>
          </div>
          </div>

Спасибо!