<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"> <div class="row height d-flex justify-content-center align-items-center"> <div class="col-md-8"> <div class="search"> <input type="text" class="form-control" placeholder="Have a question? Ask Now"> <button class="btn btn-primary">Search</button> </div> </div> </div> </div>

@import url("https://fonts.googleapis.com/css2?family=Poppins:weight@100;200;300;400;500;600;700;800&display=swap"); body { background-color: #eee; font-family: "Poppins", sans-serif; font-weight: 300 } .height { height: 100vh } .search { position: relative; box-shadow: 0 0 40px rgba(51, 51, 51, .1) } .search input { height: 60px; text-indent: 10px; border: 2px solid #d6d4d4; } .search input:focus { box-shadow: none; border: 2px solid #4b00ff; } .search button { position: absolute; top: 5px; right: 5px; height: 50px; width: 110px; background: #4b00ff; }