Список не отображается в виде вкладок

Question

Я использую загрузчик 4.0 для загрузки своих вкладок. Я использую следующий код:

<div>
       <ul class="nav nav-tabs" id="myTab" role="tablist">
           <li class="nav-item">
               <a class="nav-link active" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="all" aria-selected="true">All</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" id="categories-tab" data-toggle="tab" href="#categories" role="tab" aria-controls="categories" aria-selected="false">Categories</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" id="product-tab" data-toggle="tab" href="#product" role="tab" aria-controls="product" aria-selected="false">Product</a>
           </li>
       </ul>
       <div class="tab-content" id="myTabContent">
           <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">...</div>
           <div class="tab-pane fade" id="categories" role="tabpanel" aria-labelledby="categories-tab">...</div>
           <div class="tab-pane fade" id="product" role="tabpanel" aria-labelledby="product-tab">...</div>
       </div>
   </div>

Однако, когда я загружаю страницу, элементы списка отображаются помимо вкладки.

Есть предложения, что я делаю не так?

Я ценю ваши ответы!