<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <section class="banner-img1 text-white py-5"> <div class="container"> <div class="row text-center"> <div class="col-md-12"> <h3>Free HTML Bootstrap 4 Tab Template - Mobirise</h3> </div> </div> <div class="pb-3"></div> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-4"> <nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">New Car</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Used Car</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> <div class="card bg-primary card-body text-white"> <div class="row pb-3"> <div class="col-md-12"> <h4>Find the details</h4> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group"> <select id="inputState" class="form-control"> <option selected>... Select Make ...</option> <option>BMW</option> <option>Audi</option> <option>Maruti</option> <option>Tesla</option> </select> </div> <div class="form-group"> <select id="inputState" class="form-control"> <option selected>... Select Model ...</option> <option>BMW</option> <option>Audi</option> <option>Maruti</option> <option>Tesla</option> </select> </div> <button type="button" class="btn btn-outline-warning">Secondary</button> </div> </div> </div> </div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> <div class="card bg-danger card-body text-white"> <div class="row pb-3"> <div class="col-md-12"> <h4>Find the details</h4> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group"> <select id="inputState" class="form-control"> <option selected>... Select Budget ...</option> <option>BMW</option> <option>Audi</option> <option>Maruti</option> <option>Tesla</option> </select> </div> <div class="form-group"> <select id="inputState" class="form-control"> <option selected>... Select Vehicle Type ...</option> <option>BMW</option> <option>Audi</option> <option>Maruti</option> <option>Tesla</option> </select> </div> <button type="button" class="btn btn-outline-warning">Find New Car</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section>

.banner-img1 {background: url(https://images.pexels.com/photos/261985/pexels-photo-261985.jpeg?auto=compress&cs=tinysrgb&h=650&w=940) center top ; } .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: #dd0000; background-color: #f2f2f2; border-color: transparent transparent #f3f3f3; border-bottom: 3px solid !important; font-weight: bold; } .nav-tabs .nav-link { border-bottom: 1px solid #dd0000; color: #696969; }