<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>
<div class="container">
<div class="row">
<div class="col-md-12 bg-light">
<div class="row">
<div class="col-md-8 card-body">
<div class="row">
<div class="col-md-12">
<h2>Select your City</h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<small>Search from over 1500 cities </small>
</div>
</div>
<div class="row py-2">
<div class="col-md-12">
<form class="form-inline " action="/action_page.php">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p> POPULAR CITIES</p>
</div>
</div>
<div class="row">
<button type="button" class="btn btn-link">New Delhi</button>
<button type="button" class="btn btn-link">Chennai</button>
