<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="//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-light navbar-light border fixed-top"> <div class="container"> <!-- Brand --> <a class="navbar-brand" href="#"> <img src="http://sarto.edge-themes.com/wp-content/uploads/2018/04/landing-img-18.png" alt="Logo" style="width:70px;"> </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="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#">How it works</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Reference</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Employer</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> More </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Company</a> <a class="dropdown-item" href="#">Latest </a> <a class="dropdown-item" href="#">Popular </a> <a class="dropdown-item" href="#">Upcoming </a> <a class="dropdown-item" href="#">Offers </a> </div> </li> <form class="form-inline" action="#"> <input class="form-control mr-sm-2" type="text" placeholder="Search "> <button class="btn btn-success" type="submit"><i class="fa fa-search"></i> Search</button> </form> <button type="button" class="btn btn-secondary"data-toggle="modal" data-target="#toploginModal">Select City</button> <button type="button" class="btn btn-light"data-toggle="modal" data-target="#toploginModal">Refer Me</button> </ul> </div> </div> </nav> <!--- Login Modal box ---> <div class="modal fade" id="toploginModal" tabindex="-1" role="dialog" aria-labelledby="toploginModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="toploginModalLabel">Please follow instruction </h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="container"> <div class="row"> <div class="col-md-12 bg-light"> <div class="row"> <div class="col-md-12 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> <button type="button" class="btn btn-link">Banglore</button> <button type="button" class="btn btn-link">Jaipur</button> <button type="button" class="btn btn-link">Mumbai</button> <button type="button" class="btn btn-link">Hyderabad</button> <button type="button" class="btn btn-link">Pune</button> <button type="button" class="btn btn-link">Noida</button> <button type="button" class="btn btn-link">Kolkata</button> <button type="button" class="btn btn-link">Faridabad</button> <button type="button" class="btn btn-link">Ghaziabad</button> <button type="button" class="btn btn-link">Gurgaon</button> <button type="button" class="btn btn-link">Lucknow</button> <button type="button" class="btn btn-link">Patna</button> <button type="button" class="btn btn-link">Ranchi</button> <button type="button" class="btn btn-link">Udaipur</button> <button type="button" class="btn btn-link">Sonipat</button> <button type="button" class="btn btn-link">Haryana</button> </div> <hr> <div class="row"> <button type="button" class="btn btn-link">New Delhi</button> <button type="button" class="btn btn-link">Chennai</button> <button type="button" class="btn btn-link">Banglore</button> <button type="button" class="btn btn-link">Jaipur</button> <button type="button" class="btn btn-link">Mumbai</button> <button type="button" class="btn btn-link">Hyderabad</button> <button type="button" class="btn btn-link">Pune</button> <button type="button" class="btn btn-link">Noida</button> <button type="button" class="btn btn-link">Kolkata</button> <button type="button" class="btn btn-link">Faridabad</button> <button type="button" class="btn btn-link">Ghaziabad</button> <button type="button" class="btn btn-link">Gurgaon</button> <button type="button" class="btn btn-link">Lucknow</button> <button type="button" class="btn btn-link">Patna</button> <button type="button" class="btn btn-link">Ranchi</button> <button type="button" class="btn btn-link">Udaipur</button> <button type="button" class="btn btn-link">Sonipat</button> <button type="button" class="btn btn-link">Haryana</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>