Elements / Tabs

Basic Tab

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Tab With Icon

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Vertical Tab

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Vertical Tab With Icon

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Basic Pill

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Pill With Icon

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Vertical Pill

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Vertical Pill With Icon

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus cumque corporis et hic obcaecati ipsum consequatur nostrum, explicabo praesentium saepe porro expedita iure suscipit harum illum quas esse quo fugiat vel temporibus ad ipsam! Laudantium asperiores ad at saepe illum.

How To Use

Basic Use HTML
<ul class="nav nav-tabs mb-15">
    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#profile">Profile</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#contact">Contact</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade show active" id="home">
       <p>...</p>
    </div>
    <div class="tab-pane fade" id="profile">
       <p>...</p>
    </div>
    <div class="tab-pane fade" id="contact">
       <p>...</p>
    </div>
</div>

For more Information please follow the Official Documentation