<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> <!------ Include the above in your HEAD tag ----------> <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"> <a class="nav-link rounded-0 py-2" id="pills-bikes-tab" data-toggle="pill" href="#pills-bikes" role="tab" aria-controls="pills-bikes" aria-selected="false"> <i class="fas fa-motorcycle brd-r-fnt mx-3"></i> Bikes </a> </li> <li class="nav-item"> <a class="nav-link rounded-0 py-2" id="pills-thing-tab" data-toggle="pill" href="#pills-thing" role="tab" aria-controls="pills-thing" aria-selected="false"> <i class="fas fa-camera-retro brd-r-fnt mx-3"></i> Thing to Do </a> </li> </ul> </div> <div class="col-sm-9 px-0"> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"> <!-- Flight --> <form> <div class="row pt-2"> <div class="form-group col-lg-6 col-md-6 mb-1"> <label class="font-400 text-white">Flying from</label> <input class="form-control rounded-0"> </div> <div class="form-group col-lg-6 col-md-6 mb-1"> <label class="font-400 text-white">Flying to</label> <input class="form-control rounded-0"> </div> </div> <div class="row"> <div class="form-group col-lg-3 col-md-3 "> <label class="font-400 text-white">Departing</label> <input class="form-control rounded-0"> </div> <div class="form-group col-lg-3 col-md-3 "> <label class="font-400 text-white">Returning</label> <input class="form-control rounded-0"> </div> <div class="form-group col-lg-3 col-md-3 "> <label class="font-400 text-white">Adults</label> <input class="form-control rounded-0"> </div> <div class="form-group col-lg-3 col-md-3 "> <label class="font-400 text-white">Children</label> <input class="form-control rounded-0"> </div> </div> <div class="row"> <div class="form-group col-lg-12"> <button class="btn btn-warning">Search</button> </div> </div> </form> </div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"> <!-- Hotels --> <form> <div class="row pt-2"> <div class="form-group col-lg-12 mb-1"> <label class="font-400 text-white">Going to</label> <input class="form-control rounded-0"> </div> </div> <div class="row"> <div class="form-group col-lg-3 col-md-3 "> <label class="font-400 text-white">Check-in</label> <input class="form-control rounded-0"> </div> <div class="form-group col-lg-3 col-md-3 "> <label class="font-400 text-white">Check-out</label> <input class="form-control rounded-0"> </div> <div class="form-group col-lg-2 col-md-2 "> <label class="font-400 text-white">Rooms</label> <input class="form-control rounded-0"> </div> <div class="form-group col-lg-2 col-md-2 "> <label class="font-400 text-white">Adults</label> <input class="form-control rounded-0"> </div> <div class="form-group col-lg-2 col-md-2 "> <label class="font-400 text-white">Children</label> <input class="form-control rounded-0"> </div> </div> <div class="row"> <div class="form-group col-lg-12"> <button class="btn btn-warning">Search</button> </div> </div> </form> </div> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"> <!-- Cars --> <form> <div class="row pt-2"> <div class="form-group col-lg-6 col-md-6 mb-1"> <label class="font-400 text-white">Picking up</label> <input class="form-control rounded-0"> </div> <div class="form-group col-lg-6 col-md-6 mb-1"> <label class="font-400 text-white">Drop-off</label> <input class="form-control rounded-0"> </div> </div> <div class="row"> <div class="form-group col-lg-3 col-md-3 "> <label class="font-400 text-white">Pick-up Date</label> <input class="form-control rounded-0"> </div> <div class="form-group col-lg-3 col-md-3 "> <label class="font-400 text-white">Pick-up Time</label> <input class="form-control rounded-0"> </div> <div class="form-group col-lg-3 col-md-3 "> <label class="font-400 text-white">Drop-off Date</label> <input class="form-control rounded-0"> </div> <div class="form-group col-lg-3 col-md-3 "> <label class="font-400 text-white">Drop-off Time</label> <input class="form-control rounded-0"> </div> </div> <div class="row"> <div class="form-group col-lg-12"> <button class="btn btn-warning">Search</button> </div> </div> </form> </div> <div class="tab-pane fade" id="pills-bikes" role="tabpanel" aria-labelledby="pills-bikes-tab"> <!-- Bikes --> <form> <div class="row pt-2"> <div class="form-group col-lg-6 col-md-6 mb-1"> <label class="font-400 text-white">Picking up</label> <input class="form-control rounded-0"> </div> <div class="form-group col-lg-6 col-md-6 mb-1"> <label class="font-400 text-white">Drop-off</label> <input class="form-control rounded-0"> </div> </div> <div class="row"> <div class="form-group col-lg-3 col-md-3 "> <label class="font-400 text-white">Pick-up Date</label> <input class="form-control rounded-0"> </div> <div class="form-group col-lg-3 col-md-3 "> <label class="font-400 text-white">Pick-up Time</label> <input class="form-control rounded-0"> </div> <div class="form-group col-lg-3 col-md-3 "> <label class="font-400 text-white">Drop-off Date</label> <input class="form-control rounded-0"> </div> <div class="form-group col-lg-3 col-md-3 "> <label class="font-400 text-white">Drop-off Time</label> <input class="form-control rounded-0"> </div> </div> <div class="row"> <div class="form-group col-lg-12"> <button class="btn btn-warning">Search</button> </div> </div> </form> </div> <div class="tab-pane fade" id="pills-thing" role="tabpanel" aria-labelledby="pills-thing-tab"> <!-- Thing to Do --> <form> <div class="row pt-2"> <div class="form-group col-lg-6 col-md-6 mb-1"> <label class="font-400 text-white">Destination</label> <input class="form-control rounded-0"> </div> </div> <div class="row"> <div class="form-group col-lg-3 col-md-3 "> <label class="font-400 text-white">From</label> <input class="form-control rounded-0"> </div> <div class="form-group col-lg-3 col-md-3 "> <label class="font-400 text-white">To</label> <input class="form-control rounded-0"> </div> </div> <div class="row"> <div class="form-group col-lg-12"> <button class="btn btn-warning">Search</button> </div> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div> </div>

.bg-nav-pills { background-color: #eef2f7; } .nav-pills>li>a, .nav-tabs>li>a { color: #6c757d; font-size: 18px; font-weight: 400; } .nav-pills .nav-link.active{ color: #fff; background-color: #2196F3; } .brd-r-fnt{ border-right: 1px solid #ccc; padding: 5px 0px 5px 0px; width: 40px } .tab-content>.active { background: #2196F3; padding: 0px 20px 0px 20px; }