"search box"
Bootstrap 4.0.0 Snippet by jeevan123456

<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-warning"> <div class="container "> <div class="row"> <div class="col-md-12"> <div class="card bg-warning"> <div class="card-body"> <div class="row align-items-center justify-content-center"> <div class="col-md-2"> <div class="form-group"> <select id="inputState" class="form-control"> <option selected>Brand</option> <option>BMW</option> <option>Audi</option> <option>Maruti</option> <option>Tesla</option> </select> </div> </div> <div class="col-md-2"> <div class="form-group"> <select id="inputState" class="form-control"> <option selected>Model</option> <option>BMW</option> <option>Audi</option> <option>Maruti</option> <option>Tesla</option> </select> </div> </div> <div class="col-md-2"> <div class="form-group"> <select id="inputState" class="form-control"> <option selected>Budget</option> <option>BMW</option> <option>Audi</option> <option>Maruti</option> <option>Tesla</option> </select> </div> </div> <div class="col-md-2"> <div class="form-group"> <select id="inputState" class="form-control"> <option selected>Type</option> <option>BMW</option> <option>Audi</option> <option>Maruti</option> <option>Tesla</option> </select> </div> </div> <div class="col-md-2"> <button type="button" class="btn btn-primary btn-block">Search</button> </div> </div> </div> </div> </div> </div> </div> </section> <div class="my-5"></div> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="row"> <div class="col-md-12"> <div class="card bg-primary"> <div class="card-body"> <div class="filter-sidebar "> <div class="form-group"> <select class="form-control" id="conditionsselect1"> <option selected>Conditions</option> <option>New</option> <option>Used</option> </select> </div> <div class="form-group"> <select class="form-control" id="price1"> <option selected>Price</option> <option>Below 1 Lac</option> <option>1 to 2 Lac</option> <option>2 to 3 Lac</option> <option>3 to 4 Lac</option> <option>4 to 5 Lac</option> <option>5 to 6 Lac</option> <option>6 to 8 Lac</option> <option>8 to 10 Lac</option> <option>10 to 20 Lac</option> <option>Above 20 Lac</option> </select> </div> <div class="form-group"> <select class="form-control" id="conditionsselect2"> <option selected>Body</option> <option>Compact</option> <option>Convertible</option> <option>Coupe</option> <option>Off-road</option> <option>Sedan</option> </select> </div> <div class="form-group"> <select class="form-control" id="make1"> <option selected>Make</option> <option>Ford</option> <option>Hyundai</option> <option>Kia</option> <option>Honda</option> <option>Skoda</option> </select> </div> <div class="form-group"> <select class="form-control" id="make1"> <option selected>Model</option> <option>Accord</option> <option>Camry</option> <option>Civic</option> <option>Rapid</option> <option>Octavia</option> </select> </div> <div class="form-group"> <select class="form-control" id="fuel1"> <option selected>Fuel</option> <option>Diesel</option> <option>Petrol</option> <option>CNG</option> <option>LPG</option> <option>Hybrid</option> </select> </div> <div class="form-group"> <select class="form-control" id="mileage1"> <option selected>Max Kms Driven</option> <option> < 5000 </option> <option>5000-10000</option> <option>10000-15000</option> <option>15000-20000</option> <option>20000-25000</option> <option>> 25000</option> </select> </div> <div class="form-group"> <select class="form-control" id="year1"> <option selected>Year</option> <option>2000</option> <option>2001</option> <option>2002</option> <option>2003</option> <option>2004</option> <option>2005</option> <option>2006</option> <option>2007</option> <option>2008</option> <option>2009</option> <option>2010</option> </select> </div> <div class="form-group"> <select class="form-control" id="make1"> <option selected>Transmission</option> <option>Automatic</option> <option>Manaul</option> <option>Semi-Automatic</option> </select> </div> <hr> <button type="btn" class="btn btn-danger">Find Now</button> <button type="btn" class="btn btn-danger">Reset All</button> <div class="pb-3" </div> </div> </div> </div> </div> </div> </div> </div> <div class="col-md-9"> <div class="row"> <div class="col-md-12"> <div class="card bg-primary"> <div class="card-body"> <div class="filter-sidebar "> <div class="form-group"> <select class="form-control" id="conditionsselect1"> <option selected>Conditions</option> <option>New</option> <option>Used</option> </select> </div> <div class="form-group"> <select class="form-control" id="price1"> <option selected>Price</option> <option>Below 1 Lac</option> <option>1 to 2 Lac</option> <option>2 to 3 Lac</option> <option>3 to 4 Lac</option> <option>4 to 5 Lac</option> <option>5 to 6 Lac</option> <option>6 to 8 Lac</option> <option>8 to 10 Lac</option> <option>10 to 20 Lac</option> <option>Above 20 Lac</option> </select> </div> <div class="form-group"> <select class="form-control" id="conditionsselect2"> <option selected>Body</option> <option>Compact</option> <option>Convertible</option> <option>Coupe</option> <option>Off-road</option> <option>Sedan</option> </select> </div> <div class="form-group"> <select class="form-control" id="make1"> <option selected>Make</option> <option>Ford</option> <option>Hyundai</option> <option>Kia</option> <option>Honda</option> <option>Skoda</option> </select> </div> <div class="form-group"> <select class="form-control" id="make1"> <option selected>Model</option> <option>Accord</option> <option>Camry</option> <option>Civic</option> <option>Rapid</option> <option>Octavia</option> </select> </div> <div class="form-group"> <select class="form-control" id="fuel1"> <option selected>Fuel</option> <option>Diesel</option> <option>Petrol</option> <option>CNG</option> <option>LPG</option> <option>Hybrid</option> </select> </div> <div class="form-group"> <select class="form-control" id="mileage1"> <option selected>Max Kms Driven</option> <option> < 5000 </option> <option>5000-10000</option> <option>10000-15000</option> <option>15000-20000</option> <option>20000-25000</option> <option>> 25000</option> </select> </div> <div class="form-group"> <select class="form-control" id="year1"> <option selected>Year</option> <option>2000</option> <option>2001</option> <option>2002</option> <option>2003</option> <option>2004</option> <option>2005</option> <option>2006</option> <option>2007</option> <option>2008</option> <option>2009</option> <option>2010</option> </select> </div> <div class="form-group"> <select class="form-control" id="make1"> <option selected>Transmission</option> <option>Automatic</option> <option>Manaul</option> <option>Semi-Automatic</option> </select> </div> <hr> <button type="btn" class="btn btn-danger">Find Now</button> <button type="btn" class="btn btn-danger">Reset All</button> <div class="pb-3" </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

Related: See More


Questions / Comments: