<div class="card">
  <div class="card-header">
    <h5>Outline Tabs</h5>
       </div>
        <div class="card-body">
         <ul class="nav nav-tabs tab-outline-primary" id="Outline" role="tablist">
          <li class="nav-item" role="presentation">
           <button class="nav-link active" id="connect-tab" data-bs-toggle="tab"
            data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane"
            aria-selected="true">Connect</button>
          </li>
          <li class="nav-item" role="presentation">
           <button class="nav-link" id="discover-tab" data-bs-toggle="tab"
            data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane"
            aria-selected="false">Discover</button>
          </li>
          <li class="nav-item" role="presentation">
           <button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane"
            type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button>
          </li>
         </ul>
         <div class="tab-content" id="OutlineContent">
          <div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel"
           aria-labelledby="connect-tab" tabindex="0">
           <h6 class="mb-1">این محتوای تب اول است.</h6>
           <p>This field is a rich HTML field with a content editor like others used in Sitefinity. It
            accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy.
            Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.</p>
          </div>
          <div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab"
           tabindex="0">
           <h6 class="mb-1">این محتوای تب دو است.</h6>
           <p>This field is a rich HTML field with a content editor like others used in Sitefinity. It
            accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy.
            Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.</p>
          </div>
          <div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab"
           tabindex="0">
           <h6 class="mb-1">این محتوای تب سوم است.</h6>
           <p>This field is a rich HTML field with a content editor like others used in Sitefinity. It
            accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy.
            Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.</p>
      </div>
    </div>
  </div>
</div>

  

  
<div class="card equal-card">
  <div class="card-header">
    <h5>Background Tabs</h5>
      </div>
         <div class="card-body">
          <ul class="nav nav-tabs tab-primary bg-primary p-1" id="bg" role="tablist">
           <li class="nav-item" role="presentation">
            <button class="nav-link active" id="features-tab" data-bs-toggle="tab"
             data-bs-target="#features-tab-pane" type="button" role="tab" aria-controls="features-tab-pane"
             aria-selected="true"> <i class="ti ti-disc pe-1 ps-1"></i> ویژگی‌ها</button>
           </li>
           <li class="nav-item" role="presentation">
            <button class="nav-link" id="history-tab" data-bs-toggle="tab"
             data-bs-target="#history-tab-pane" type="button" role="tab" aria-controls="history-tab-pane"
             aria-selected="false"><i class="ti ti-history pe-1 ps-1"></i>تاریخچه</button>
           </li>
           <li class="nav-item" role="presentation">
            <button class="nav-link" id="reviews-tab" data-bs-toggle="tab"
             data-bs-target="#reviews-tab-pane" type="button" role="tab" aria-controls="reviews-tab-pane"
             aria-selected="false"><i class="ti ti-star pe-1 ps-1"></i>reviews</button>
           </li>
      

          </ul>
          <div class="tab-content" id="bgContent">
           <div class="tab-pane fade show active" id="features-tab-pane" role="tabpanel"
            aria-labelledby="features-tab" tabindex="0">
            <p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment
             identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors
             with fragment identifiers to switch between them.</p>
           </div>
      

           <div class="tab-pane fade" id="history-tab-pane" role="tabpanel" aria-labelledby="history-tab"
            tabindex="0">
            <ol>
             <li>Show only the last tab.</li>
             <li>If <code>:target</code> matches a tab, show it and hide all following siblings.</li>
             <li>Matches a tab, show it and hide all following siblings.</li>
            </ol>
           </div>
      

           <div class="tab-pane fade" id="reviews-tab-pane" role="tabpanel" aria-labelledby="reviews-tab"
            tabindex="0">
            <p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment
             identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors
             with fragment identifiers to switch between them.</p>
      </div>
    </div>
  </div>
</div>
      
  

                    
                      
                        <div class="card equal-card">
                         <div class="card-header">
                          <h5>Vertical Tabs right side</h5>
                         </div>
                         <div class="card-body vertical-right-tab">
                        

                          <ul class="nav nav-tabs app-tabs-secondary me-0 ms-3" id="vl-bg" role="tablist">
                           <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="vl-features-tab" data-bs-toggle="tab"
                             data-bs-target="#vl-features-tab-pane" type="button" role="tab"
                             aria-controls="vl-features-tab-pane" aria-selected="true"> <i
                              class="ti ti-disc pe-1 ps-1"></i>
                             ویژگی‌ها</button>
                           </li>
                           <li class="nav-item" role="presentation">
                            <button class="nav-link" id="vl-history-tab" data-bs-toggle="tab"
                             data-bs-target="#vl-history-tab-pane" type="button" role="tab"
                             aria-controls="vl-history-tab-pane" aria-selected="false"><i
                              class="ti ti-history pe-1 ps-1"></i>تاریخچه</button>
                           </li>
                           <li class="nav-item" role="presentation">
                            <button class="nav-link" id="vl-reviews-tab" data-bs-toggle="tab"
                             data-bs-target="#vl-reviews-tab-pane" type="button" role="tab"
                             aria-controls="vl-reviews-tab-pane" aria-selected="false"><i
                              class="ti ti-star pe-1 ps-1"></i>reviews</button>
                           </li>
                        

                          </ul>
                          <div class="tab-content text-sm-end" id="vl-bgContent">
                           <div class="tab-pane fade show active" id="vl-features-tab-pane" role="tabpanel"
                            aria-labelledby="vl-features-tab" tabindex="0">
                            <p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment
                             identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors
                             with fragment identifiers to switch between them.</p>
                           </div>
                        

                           <div class="tab-pane fade" id="vl-history-tab-pane" role="tabpanel"
                            aria-labelledby="vl-history-tab" tabindex="0">
                            <p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment
                             identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors
                             with fragment identifiers to switch between them.</p>
                           </div>
                        

                           <div class="tab-pane fade" id="vl-reviews-tab-pane" role="tabpanel"
                            aria-labelledby="vl-reviews-tab" tabindex="0">
                            <p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment
                             identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors
                             with fragment identifiers to switch between them.</p>
                           </div>
                          </div>
                        

                         </div>
                        </div>