1 2 3 4 5
A
B
C
B
D

<div class="card">
       <div class="card-body">
          <h4 class="card-title">Title</h4>
          <!-- Nav tabs -->
          <div class="vtabs">
             <ul class="nav nav-tabs tabs-vertical" role="tablist">
                <li class="nav-item"> <a class="nav-link active show" data-toggle="tab" href="#home0" role="tab" aria-selected="true"><span class="hidden-sm-up"><i class="ti-home"></i></span> <span class="hidden-xs-down">A0</span> </a> </li>
                {% for i in range(1,5) %}
                <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#home{{ i }}" role="tab" aria-selected="true"><span class="hidden-sm-up"><i class="ti-home"></i></span> <span class="hidden-xs-down">A{{ i }}</span> </a> </li>
                {% endfor %}
             </ul>
             <!-- Tab panes -->
             <div class="tab-content">
                <div class="tab-pane active show" id="home0" role="tabpanel">
                   0
                </div>
                {% for i in range(1,5) %}
                <div class="tab-pane" id="home{{ i }}" role="tabpanel">
                   <div class="card">
                      <div class="card-body p-b-0">
                         <h4 class="card-title">Form header</h4>
                         <!-- Nav tabs -->
                         <ul class="nav nav-tabs customtab2" role="tablist">
                            <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#home7" role="tab" aria-selected="false"><span class="hidden-sm-up"><i class="ti-home"></i></span> <span class="hidden-xs-down">Home</span></a> </li>
                            <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile7" role="tab" aria-selected="false"><span class="hidden-sm-up"><i class="ti-user"></i></span> <span class="hidden-xs-down">Profile</span></a> </li>
                            <li class="nav-item"> <a class="nav-link active show" data-toggle="tab" href="#messages7" role="tab" aria-selected="true"><span class="hidden-sm-up"><i class="ti-email"></i></span> <span class="hidden-xs-down">Messages</span></a> </li>
                         </ul>
                         <!-- Tab panes -->
                         <div class="tab-content">
                            <div class="tab-pane" id="home7" role="tabpanel">
                               <div class="p-20">
                                  <h5>Best Clean Tab ever</h5>
                                  <h6>you can use it with the small code</h6>
                                  <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.</p>
                               </div>
                            </div>
                            <div class="tab-pane p-20" id="profile7" role="tabpanel">2</div>
                            <div class="tab-pane p-20 active show" id="messages7" role="tabpanel">3</div>
                         </div>
                      </div>
                   </div>
                </div>
                {% endfor %}
             </div>
          </div>
       </div>
    <

/div>