<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 mt-5"> <div class="row d-flex justify-content-center"> <div class="col-md-10"> <div class="card p-3 py-4"> <h5>An Easier way to find your Housing</h5> <div class="row g-3 mt-2"> <div class="col-md-3"> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false"> Any Status </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item" href="#">Rural</a></li> <li><a class="dropdown-item" href="#">Urban</a></li> <li><a class="dropdown-item" href="#">All</a></li> </ul> </div> </div> <div class="col-md-6"> <input type="text" class="form-control" placeholder="Enter address e.g. street, city and state or zip"> </div> <div class="col-md-3"> <button class="btn btn-secondary btn-block">Search Results</button> </div> </div> <div class="mt-3"> <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="advanced"> Advance Search With Filters <i class="fa fa-angle-down"></i> </a> <div class="collapse" id="collapseExample"> <div class="card card-body"> <div class="row"> <div class="col-md-4"> <input type="text" placeholder="Property ID" class="form-control"> </div> <div class="col-md-4"> <input type="text" class="form-control" placeholder="Search by MAP"> </div> <div class="col-md-4"> <input type="text" class="form-control" placeholder="Search by Country"> </div> </div> </div> </div> </div> </div> </div> </div> </div>

body { background-color: #00838F } .advanced { text-decoration: none; font-size: 15px; font-weight: 500 } .btn-secondary, .btn-secondary:focus, .btn-secondary:active { color: #fff; background-color: #00838f !important; border-color: #00838f !important; box-shadow: none } .advanced { color: #00838f !important } .form-control:focus { box-shadow: none; border: 1px solid #00838f }