<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 ----------> <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> <div class="carousel-caption"> <div class="col-md-6"> <div class="row"> <div class="col-md-12 d-none d-md-block "> <h1>Find your</h1> <h1>Perfect Match</h1> <p>Get the best offers on cars. Check out the latest cars.</p> </div> </div> <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">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-light card-body "> <div class="row"> <div class="col-md-4"> <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-4"> <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-4"> <button type="button" class="btn btn-primary btn-block">Search</button> </div> </div> </div> </div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> <div class="card bg-light card-body text-white"> <div class="row"> <div class="col-md-4"> <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-4"> <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-4"> <button type="button" class="btn btn-primary btn-block">Search</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- The slideshow --> <div class="carousel-inner d-none d-md-block "> <div class="carousel-item active"> <img src="https://img.gaadicdn.com/images/uploadimages/1530711216536/desktopk.jpg" alt="Los Angeles"> </div> <div class="carousel-item"> <img src="https://img.gaadicdn.com/images/uploadimages/1527152349413/creta12.jpg" alt="Chicago"> </div> <div class="carousel-item"> <img src="https://img.gaadicdn.com/images/featuredcarimages/Honda-Amaze-20/Honda-0.jpg" alt="New York"> </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:50px; bottom: auto; text-align:left;} /************ Services **************/ img {width:100%;}