<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <nav class="navbar navbar-expand-sm bg-dark border "> <div class="container"> <!-- Brand --> <a class="navbar-brand" href="#"> <img src="http://velikorodnov.com/html/autotrader/images/logo.png" alt="Logo" style="width:120px;"> </a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">Sell</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact Us</a> </li> </ul> </div> </div> </nav> <div class="banner slider"> <div id="demo" class="carousel slide" data-ride="carousel" data-interval="false"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="http://wpregular.support/wp/insurers/wp-content/uploads/2017/03/Funeral-Plan-Beach-Umbrella.jpeg" alt="Los Angeles"> <div class="carousel-caption"> <div class="container py-5 my-5"> <div class="row text-center pb-4"> <div class="col-md-12 text-white"> <h2>Find the New & Used Car in India</h2> </div> </div> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-md-2"> <div class="form-group "> <select id="inputState" class="form-control" > <option selected>... Select New/Used...</option> <option>New</option> <option>Used</option> </select> </div> </div> <div class="col-md-2"> <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-2"> <div class="form-group "> <select id="inputState" class="form-control" > <option selected>... Select Model...</option> <option>City</option> <option>Jazz</option> <option>Brio</option> </select> </div> </div> <div class="col-md-2"> <div class="form-group "> <select id="inputState" class="form-control" > <option selected>... Select Location...</option> <option>New Delhi</option> <option>Banglore</option> <option>Chennai</option> <option>Jaipur</option> </select> </div> </div> <div class="col-md-2"> <div class="form-group "> <select id="inputState" class="form-control" > <option selected>... Select Budget...</option> <option>1 Lac-5 Lac</option> <option>5 Lac-10 Lac</option> <option>10 Lac-15 Lac</option> <option>15 Lac-20 Lac</option> <option>20 Lac-25 Lac</option> <option>25 Lac & Above</option> </select> </div> </div> <div class="col-md-2"> <button type="button" class="btn btn-dark">Search Car</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="carousel-item"> <img src="http://wpregular.support/wp/insurers/wp-content/uploads/2017/03/s3.jpg" alt="Chicago"> <div class="carousel-caption"> <div class="col-md-7"> <h1 class="pb-2"><strong>The WordPress Theme for Growth Hackers </strong> </h1> <h4>The right look and feel to promote any product, service or online course.</h4> <button type="button" class="btn btn-success mt-4">Buy Growthpress</button> <button type="button" class="btn btn-dark mt-4">Get More Details</button> </div> </div> </div> <div class="carousel-item"> <img src="https://images.cardekho.com/images/featuredcarimages/Honda-WR-V-19/wrv-0.jpg" alt="New York"> <div class="carousel-caption"> <div class="col-md-7"> <h1 class="pb-2"><strong>The WordPress Theme for Growth Hackers </strong> </h1> <h4>The right look and feel to promote any product, service or online course.</h4> <button type="button" class="btn btn-success mt-4">Buy Growthpress</button> <button type="button" class="btn btn-dark mt-4">Get More Details</button> </div> </div> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div>

/**************** Banner Slider Carousel **************/ .carousel-inner img {width: 100%; max-height:500px;} .carousel-caption {color:#000;top:20px; bottom: auto; text-align:left;} .carousel-caption h1 { color:#fff; background-color:#;} /************ Services **************/ img {width:100%;}

<div class="container py-5 my-5"> <div class="row text-center pb-4"> <div class="col-md-12"> <h2>Find the New & Used Car in India</h2> </div> </div> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-md-2"> <div class="form-group "> <select id="inputState" class="form-control" > <option selected>... Select New/Used...</option> <option>New</option> <option>Used</option> </select> </div> </div> <div class="col-md-2"> <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-2"> <div class="form-group "> <select id="inputState" class="form-control" > <option selected>... Select Model...</option> <option>City</option> <option>Jazz</option> <option>Brio</option> </select> </div> </div> <div class="col-md-2"> <div class="form-group "> <select id="inputState" class="form-control" > <option selected>... Select Location...</option> <option>New Delhi</option> <option>Banglore</option> <option>Chennai</option> <option>Jaipur</option> </select> </div> </div> <div class="col-md-2"> <div class="form-group "> <select id="inputState" class="form-control" > <option selected>... Select Budget...</option> <option>1 Lac-5 Lac</option> <option>5 Lac-10 Lac</option> <option>10 Lac-15 Lac</option> <option>15 Lac-20 Lac</option> <option>20 Lac-25 Lac</option> <option>25 Lac & Above</option> </select> </div> </div> <div class="col-md-2"> <button type="button" class="btn btn-dark">Search Car</button> </div> </div> </div> </div> </div> </div> </div>