<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 ----------> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <div class="container"> <h2 class="text-center">Search Panel</h2> <div class="row justify-content-center"> <div class="col-6"> <section> <div class="container-fluid"> <div class="search-component my-2"> <div class="d-flex justify-content-between align-items-center"> <div class="search-icn"><i class="fas fa-search"></i></div> <div class="search-input flex-grow-1"><input type="search" placeholder="Search here..." class="form-control py-3 h-auto"></div> <div class="search-btn"><button class="btn btn-primary"><i class="fas fa-long-arrow-alt-right"></i></button></div> </div> </div> <div class="search-component rounded my-2"> <div class="d-flex justify-content-between align-items-center"> <div class="search-icn"><i class="fas fa-search"></i></div> <div class="search-input flex-grow-1"><input type="search" placeholder="Search here..." class="form-control rounded py-3 h-auto"></div> <div class="search-btn"><button class="btn btn-primary"><i class="fas fa-long-arrow-alt-right"></i></button></div> </div> </div> </div> </section> </div> </div> </div> <script src="js/all.min.js"></script>

:root{font-size:16px;} body {background:#e9ebf0; font-size: 1rem} /* Search Component */ .search-component{border-radius: .3rem; position: relative; font-size: 1rem} .search-component .search-icn, .search-component .search-btn{ position: absolute; right: 0; padding:0 .5rem } .search-component .search-icn{ left: .5rem; right: auto; color:#666} .search-component .search-input input{border:1px solid #fff; width: 100%; padding: 1rem 3.5rem 1rem 3rem;box-sizing: border-box} .search-component .search-input input:hover{box-shadow:0 0 10px rgba(0,0,0,.3)} /* Search Component end */ /* Search Component rounded */ .search-component.rounded .search-input input, .search-component.rounded .search-btn .btn{ border-radius: 3rem } /* Search Component rounded end */