<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h5>TABS VERTICAL LEFT</h5>
</div>
</div>
<div class="row pb-5 mt-4">
<div class="col-lg-12">
<div class="card border border-secondery">
<div class="card-body py-1">
<div class="row">
<div class="col-sm-3 mb-2 mb-sm-0 px-0">
<ul class="nav flex-column nav-pills bg-nav-pills" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active rounded-0 py-2" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">
<i class="fas fa-plane-departure brd-r-fnt mx-3"></i> Flight
</a>
</li>
<li class="nav-item">
<a class="nav-link rounded-0 py-2" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">
<i class="fas fa-hotel brd-r-fnt mx-3"></i> Hotels
</a>
</li>
<li class="nav-item">
<a class="nav-link rounded-0 py-2" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">
<i class="fas fa-car brd-r-fnt mx-3"></i> Cars
</a>
</li>
<li class="nav-item">
