<h2>5-tabs demo</h2>

<div class="tabs">
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="product-tab" data-toggle="tab" href="#product5" role="tab" aria-controls="product"
         aria-selected="true">Product details</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="returns-tab" data-toggle="tab" href="#returns5" role="tab" aria-controls="returns"
         aria-selected="false">Returns & refunds</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="delivery-tab" data-toggle="tab" href="#delivery5" role="tab" aria-controls="delivery"
         aria-selected="false">Delivery</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="click-tab" data-toggle="tab" href="#click5" role="tab" aria-controls="click"
         aria-selected="false">Click & Collect</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="calculator-tab" data-toggle="tab" href="#calculator5" role="tab"
         aria-controls="calculator" aria-selected="false">Calculator</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="product5" role="tabpanel" aria-labelledby="product-tab">
      Product details
    </div>
    <div class="tab-pane fade" id="returns5" role="tabpanel" aria-labelledby="returns-tab">
      Returns & refunds content
    </div>
    <div class="tab-pane fade" id="delivery5" role="tabpanel" aria-labelledby="delivery-tab">
      Delivery content
    </div>
    <div class="tab-pane fade" id="click5" role="tabpanel" aria-labelledby="click-tab">
      Click & Collect content
    </div>
    <div class="tab-pane fade" id="calculator5" role="tabpanel" aria-labelledby="calculator-tab">
      Calculator content
    </div>
  </div>
</div>


<h2 style="margin-top: 100px">4-tabs demo</h2>

<div class="tabs">
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="product-tab" data-toggle="tab" href="#product4" role="tab" aria-controls="product"
         aria-selected="true">Product details</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="returns-tab" data-toggle="tab" href="#returns4" role="tab" aria-controls="returns"
         aria-selected="false">Returns & refunds</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="delivery-tab" data-toggle="tab" href="#delivery4" role="tab" aria-controls="delivery"
         aria-selected="false">Delivery</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="click-tab" data-toggle="tab" href="#click4" role="tab" aria-controls="click"
         aria-selected="false">Click & Collect</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="product4" role="tabpanel" aria-labelledby="product-tab">
      Product details
    </div>
    <div class="tab-pane fade" id="returns4" role="tabpanel" aria-labelledby="returns-tab">
      Returns & refunds content
    </div>
    <div class="tab-pane fade" id="delivery4" role="tabpanel" aria-labelledby="delivery-tab">
      Delivery content
    </div>
    <div class="tab-pane fade" id="click4" role="tabpanel" aria-labelledby="click-tab">
      Click & Collect content
    </div>

  </div>
</div>


<h2 style="margin-top: 100px">3-tabs demo</h2>

<div class="tabs">
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="product-tab" data-toggle="tab" href="#product3" role="tab" aria-controls="product"
         aria-selected="true">Product details</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="returns-tab" data-toggle="tab" href="#returns3" role="tab" aria-controls="returns"
         aria-selected="false">Returns & refunds</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="delivery-tab" data-toggle="tab" href="#delivery3" role="tab" aria-controls="delivery"
         aria-selected="false">Delivery</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="product3" role="tabpanel" aria-labelledby="product-tab">
      Product details
    </div>
    <div class="tab-pane fade" id="returns3" role="tabpanel" aria-labelledby="returns-tab">
      Returns & refunds content
    </div>
    <div class="tab-pane fade" id="delivery3" role="tabpanel" aria-labelledby="delivery-tab">
      Delivery content
    </div>
  </div>
</div>


<h2 style="margin-top: 100px">2-tabs demo</h2>

<div class="tabs">
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="product-tab" data-toggle="tab" href="#product2" role="tab" aria-controls="product"
         aria-selected="true">Product details</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="returns-tab" data-toggle="tab" href="#returns2" role="tab" aria-controls="returns"
         aria-selected="false">Returns & refunds</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="product2" role="tabpanel" aria-labelledby="product-tab">
      Product details
    </div>
    <div class="tab-pane fade" id="returns2" role="tabpanel" aria-labelledby="returns-tab">
      Returns & refunds content
    </div>
  </div>
</div>


<h2 style="margin-top: 100px">3-tabs-small demo</h2>

<div class="tabs">
  <div class="offset-lg-3 col-lg-6">
    <ul class="nav nav-tabs nav-tabs_small-3" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="product-tab" data-toggle="tab" href="#product3_small" role="tab" aria-controls="product"
           aria-selected="true">Product details</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="returns-tab" data-toggle="tab" href="#returns3_small" role="tab" aria-controls="returns"
           aria-selected="false">Returns & refunds</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="delivery-tab" data-toggle="tab" href="#delivery3_small" role="tab"
           aria-controls="delivery" aria-selected="false">Delivery</a>
      </li>
    </ul>
  </div>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="product3_small" role="tabpanel" aria-labelledby="product-tab">
      Product details
    </div>
    <div class="tab-pane fade" id="returns3_small" role="tabpanel" aria-labelledby="returns-tab">
      Returns & refunds content
    </div>
    <div class="tab-pane fade" id="delivery3_small" role="tabpanel" aria-labelledby="delivery-tab">
      Delivery content
    </div>
  </div>
</div>


<h2 style="margin-top: 100px">2-tabs-small demo</h2>

<div class="tabs">
  <div class="offset-md-3 col-md-6">
    <ul class="nav nav-tabs nav-tabs_small-2" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="product-tab" data-toggle="tab" href="#product2_small" role="tab" aria-controls="product"
           aria-selected="true">Product details</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="returns-tab" data-toggle="tab" href="#returns2_small" role="tab" aria-controls="returns"
           aria-selected="false">Returns & refunds</a>
      </li>
    </ul>
  </div>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="product2_small" role="tabpanel" aria-labelledby="product-tab">
      Product details
    </div>
    <div class="tab-pane fade" id="returns2_small" role="tabpanel_small" aria-labelledby="returns-tab">
      Returns & refunds content
    </div>
  </div>
</div>
