@themesberg/pixel-lite-bootstrap-ui-kit
Version:
Open-source Bootstrap 5 UI Kit
94 lines • 4.29 kB
HTML
<!-- Section -->
<div class="section section-md">
<div class="container">
<div class="row">
<div class="col-md-10">
<!-- Nav Wrapper -->
<div class="nav-wrapper position-relative">
<ul class="nav nav-pills nav-fill flex-column flex-sm-row">
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0 active" data-bs-toggle="tab" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0" data-bs-toggle="tab" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0" data-bs-toggle="tab" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0" data-bs-toggle="tab" href="#">Messages</a>
</li>
</ul>
</div>
<!-- End of Nav Wrapper -->
</div>
</div>
<!-- Title -->
<div class="row mt-5 mb-3">
<div class="col-md-4">
<div class="mb-2">
<h4 class="h5">Round Pill</h4>
</div>
</div>
</div>
<!-- End of Title -->
<div class="row">
<div class="col-md-10">
<!-- Nav Wrapper -->
<div class="nav-wrapper position-relative">
<ul class="nav nav-pills rounded nav-fill flex-column flex-md-row">
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0 active" data-bs-toggle="tab" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0" data-bs-toggle="tab" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0" data-bs-toggle="tab" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0" data-bs-toggle="tab" href="#">Messages</a>
</li>
</ul>
</div>
<!-- End of Nav Wrapper -->
</div>
</div>
<!-- Title -->
<div class="row mt-5 mb-3">
<div class="col-md-4">
<div class="mb-2">
<h4 class="h5">Pills with Icons</h4>
</div>
</div>
</div>
<!-- End of Title -->
<div class="row">
<div class="col-md-10">
<!-- Nav Wrapper -->
<div class="nav-wrapper position-relative">
<ul class="nav nav-pills nav-fill flex-column flex-md-row">
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0 active" data-bs-toggle="tab" href="#"><span
class="fas fa-tachometer-alt me-2"></span>Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0" data-bs-toggle="tab" href="#"><span
class="far fa-user-circle me-2"></span>Profile</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0" data-bs-toggle="tab" href="#"><span
class="far fa-sun me-2"></span>Settings</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0" data-bs-toggle="tab" href="#"><span
class="far fa-comments me-2"></span>Messages</a>
</li>
</ul>
</div>
<!-- End of Nav Wrapper -->
</div>
</div>
</div>
</div>
<!-- End of Section -->