<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="container"> <div class="advance-search"> <form action="#"> <div class="row"> <!-- Store Search --> <div class="col-lg-6 col-md-12"> <div class="block d-flex"> <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="search" placeholder="Search for store"> </div> </div> <div class="col-lg-6 col-md-12"> <div class="block d-flex"> <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="search" placeholder="Search for store"> <!-- Search Button --> <button class="btn btn-main">SEARCH</button> </div> </div> </div> </form> </div> </div>

.hero-area .advance-search { background: #fff; padding: 40px 30px; border-radius: 3px; margin-bottom: -50px; box-shadow: -1px 3px 6px rgba(0, 0, 0, 0.12); } .d-flex { display: -ms-flexbox!important; display: flex!important; }