<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> <div class="container"> <div class="row"> <div class="col-md-12"> <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">Search by Brand</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">Search by Price</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> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div> </div> </div> </div> </div> </section> <section class="bg-danger text-white"> <div class="container "> <div class="row"> <div class="col-md-12"> <div class="card-body"> <div class="row pb-2"> <div class="col-md-12"> <h4>Find the Details</h4> </div> </div> <div class="row"> <div class="col-md-3"> <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> <div class="col-md-3"> <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> </div> <div class="col-md-3"> <button type="button" class="btn btn-primary btn-block">Search</button> </div> </div> </div> </div> </div> </div> </section> <section> <div class="container"> <div class="row "> <div class="col-md-4"> <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> </div> </section> <section> <div class="container"> <div class="row "> <div class="col-md-4"> <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> </section>

.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; }