Tab component - 5
COPY
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="pt-5">
<ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist" style="--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);">
<li class="nav-item" role="presentation">
<button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
:root {
--bs-blue: #009ce4;
--bs-blue-rgb: 0, 156, 228;
--bs-primary: var(--bs-blue);
--bs-primary-rgb: var(--bs-blue-rgb);
}
body {
font-size: .90rem;
background: #f5f5f5;
}
.h-100v {
height: 50vh;
}
Tab component - 3
COPY
<div class="px-3">
<nav class="mt-2 bg-light rounded-top border">
<div class="nav fw-medium" id="nav-tab" role="tablist">
<button class="nav-link active px-4 py-2" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">
<div><i class="bi bi-badge-ar fs-5 text-primary"></i></div>
Level 1
</button>
<button class="nav-link px-4 py-2" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">
<div>
<i class="bi bi-badge-4k fs-5 text-primary"></i>
</div>
Level 2</button>
<button class="nav-link px-4 py-2" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">
<div><i class="bi bi-badge-8k fs-5 text-primary"></i></div>
Level 3</button>
</div>
</nav>
<div class="tab-content border rounded-bottom p-3 h-100v" id="nav-tabContent">
<div class="tab-pane fade show active px-2" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
<h3>Level 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam. </p>
<p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="tab-pane fade px-2" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
<h3>Level 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">
<h3>Level 3</h3>
<p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
body {
font-size: .90rem;
}
.nav-link {
color: #242424;
border-right: 1px solid #cfcfcf;
}
a:hover,
.nav-link.active,
.nav-link:hover {
color: var(--bs-primary);
background-color: rgba(var(--bs-primary-rgb), 0.10) ;
}
.nav-link.active {
border-bottom: 3px solid rgba(var(--bs-primary-rgb), 0.80);
}
.h-100v {
height: 50vh;
}
Tab component - 4
COPY
<div class="px-3">
<nav class="mt-2 border-bottom">
<div class="nav fw-medium" id="nav-tab" role="tablist">
<button class="nav-link active px-4 py-3 me-2" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Level 1</button>
<button class="nav-link px-4 py-2 me-3" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Level 2</button>
<button class="nav-link px-4 py-2 me-3" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Level 3</button>
</div>
</nav>
<div class="tab-content py-3 h-100v" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
<h3>Level 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
<p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
<h3>Level 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">
<h3>Level 3</h3>
<p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
body {
font-size: .90rem;
}
.nav-link {
color: rgba(var(--bs-black-rgb), 0.8);
}
.nav-link.active,
.nav-link:hover {
color: var(--bs-primary);
border-bottom: 3px solid var(--bs-primary);
}
.h-100v {
height: 50vh;
}
Tab component - 2
COPY
<div class="px-3">
<nav class="mt-2 rounded-top bg-light p-2">
<div class="nav fw-medium" id="nav-tab" role="tablist">
<button class="nav-link rounded-5 active px-4 me-1" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Level 1</button>
<button class="nav-link rounded-5 px-4 me-1" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Level 2</button>
<button class="nav-link rounded-5 px-4" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Level 3</button>
</div>
</nav>
<div class="tab-content border p-3 h-100v" id="nav-tabContent">
<div class="tab-pane fade show active px-2" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
<h3 class="mt-2 text-primary">Level 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
<p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="tab-pane fade px-2" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
<h3 class="mt-2 text-primary">Level 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">
<h3 class="mt-2 text-primary">Level 3</h3>
<p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
body {
font-size: .90rem;
}
.nav-link {
background-color: rgba(var(--bs-primary-rgb), 0.10);
}
a:hover,
.nav-link.active,
.nav-link:hover {
color: var(--bs-white) !important;
background-color: var(--bs-primary);
}
.nav-link.active {
background-color: var(--bs-primary) !important;
color: #ffffff !important;
}
.h-100v {
height: 50vh;
}
Tab component - 1
COPY
<div class="p-3">
<nav class="mt-2 bg-primary bg-opacity-10 rounded-top">
<div class="nav fw-medium" id="nav-tab" role="tablist">
<button class="nav-link active px-4 py-3" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Level 1</button>
<button class="nav-link px-4 py-3" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Level 2</button>
<button class="nav-link px-4 py-3" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Level 3</button>
</div>
</nav>
<div class="tab-content border rounded-bottom p-3 h-100v" id="nav-tabContent">
<div class="tab-pane fade show active px-2" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
<h3>Level 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
<p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="tab-pane fade px-2" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
<h3>Level 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">
<h3>Level 3</h3>
<p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
:root {
--bs-blue: #009ce4;
--bs-blue-rgb: 0, 156, 228;
--bs-primary: var(--bs-blue);
--bs-primary-rgb: var(--bs-blue-rgb);
}
body {
font-size: .90rem;
}
.nav-link {
color: var(--bs-primary);
background-color: rgba(var(--bs-primary-rgb), .10);
margin-right: 1px;
}
a:hover,
.nav-link.active,
.nav-link:hover {
color: #ffffff;
background-color: rgba(var(--bs-primary-rgb), 1);
border-bottom: 3px solid rgba(var(--bs-black-rgb), 0.80);
}
.nav-link.active {
border-bottom: 3px solid rgba(var(--bs-black-rgb), 0.80);
}
.h-100v {
height: 50vh;
}
More coming soon
Regular license
- Free to use this design
- Customization by expert designer $20/hr
- For more information please get in touch with our marketing person - info@webui.io