<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="bg-light "> <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-brand-tab" data-toggle="tab" href="#nav-brand" role="tab" aria-controls="nav-brand" aria-selected="true">Search by Brand</a> <a class="nav-item nav-link" id="nav-price-tab" data-toggle="tab" href="#nav-price" role="tab" aria-controls="nav-price" 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-brand" role="tabpanel" aria-labelledby="nav-brand-tab"> <div class="row py-5 my-4"> <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> <div class="tab-pane fade" id="nav-price" role="tabpanel" aria-labelledby="nav-price-tab"> <div class="row py-5 my-5"> <div class="col-md-12"> <div class="card-body"> <div class="row pb-2"> <div class="col-md-12"> <h4>Find the Details in your budget</h4> </div> </div> <div class="row"> <div class="col-md-3"> <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> <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> </div> </div> </div> </div> </section> <div class="my-3"></div> <section> <div class="container"> <div class="row py-2"> <div class="col-md-12"> <h4>We found 1 car according to your search criteria</h4> </div> </div> <div class="row py-2"> <div class="col-md-3 vertical-box"> <div class="card"> <img class="card-img-top mh200-text" src="https://img2.gaadicdn.com/images/usedcarimages/320x224/11-2017/1843403/IMG_6603.jpg" alt="Card image"> <div class="card-body"> <h4 class="card-title mw30-text">2006 Toyota Innova 2.5 V Diesel 7-seater 2006 Toyota Innova 2.5 V Diesel 7-se</h4> <h5 class="card-text">Rs. 25.32 Lac*</h5> <ul class="list-inline"> <li class="list-inline-item">44,114 Km</li> <li class="list-inline-item">Petrol</li> <li class="list-inline-item">Gurugram</li> </ul> <button type="button" class="btn btn-outline-danger">Contact Sellers</button> </div> </div> </div> <div class="col-md-3 vertical-box"> <div class="card"> <img class="card-img-top mh200-text" src="https://img2.gaadicdn.com/images/usedcarimages/320x224/11-2017/1843403/IMG_6603.jpg" alt="Card image"> <div class="card-body"> <h4 class="card-title mw30-text">2006 Toyota Innova 2.5 V Diesel 7-seater 2006 Toyota Innova 2.5 V Diesel 7-se</h4> <h5 class="card-text">Rs. 25.32 Lac*</h5> <ul class="list-inline"> <li class="list-inline-item">44,114 Km</li> <li class="list-inline-item">Petrol</li> <li class="list-inline-item">Gurugram</li> </ul> <button type="button" class="btn btn-outline-danger">Contact Sellers</button> </div> </div> </div> <div class="col-md-3 vertical-box"> <div class="card"> <img class="card-img-top mh200-text" src="https://img2.gaadicdn.com/images/usedcarimages/320x224/11-2017/1843403/IMG_6603.jpg" alt="Card image"> <div class="card-body"> <h4 class="card-title mw30-text">2006 Toyota Innova 2.5 V Diesel 7-seater 2006 Toyota Innova 2.5 V Diesel 7-se</h4> <h5 class="card-text">Rs. 25.32 Lac*</h5> <ul class="list-inline"> <li class="list-inline-item">44,114 Km</li> <li class="list-inline-item">Petrol</li> <li class="list-inline-item">Gurugram</li> </ul> <button type="button" class="btn btn-outline-danger">Contact Sellers</button> </div> </div> </div> <div class="col-md-3 vertical-box"> <div class="card"> <img class="card-img-top mh200-text" src="https://img2.gaadicdn.com/images/usedcarimages/320x224/11-2017/1843403/IMG_6603.jpg" alt="Card image"> <div class="card-body"> <h4 class="card-title mw30-text">2006 Toyota Innova 2.5 V Diesel 7-seater 2006 Toyota Innova 2.5 V Diesel 7-se</h4> <h5 class="card-text">Rs. 25.32 Lac*</h5> <ul class="list-inline"> <li class="list-inline-item">44,114 Km</li> <li class="list-inline-item">Petrol</li> <li class="list-inline-item">Gurugram</li> </ul> <button type="button" class="btn btn-outline-danger">Contact Sellers</button> </div> </div> </div> </div> </div> </section>

.nav-tabs a {background:#dd0000!important;}