"Search - Bootstrap 4"
Bootstrap 4.0.0 Snippet by kaguru

Post to Facebook Tweet this

<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> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Search - Bootstrap 4</title> <meta name="description" content="Search - Bootstrap 4"> <!-- Font Awesome CDN --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style> /*20px padding-Just to be well visible here*/ #searchForm { padding: 20px; } </style> </head> <body> <div id="searchForm"> <div class="container"> <div class="row"> <form class="form-row"> <div class="col"> <input class="form-control" type="search" placeholder="Search"> </div> <div class="col"> <button class="btn btn-outline-success bg-success" type="submit"><i class="fa fa-search"></i></button> </div> </form> </div> </div> </div> </body> </html>
#searchForm{ display: absolute; width: 100%; margin-left: 11%; margin-top: 70px; } #searchForm .form-row .col { margin: 0; padding: 0; } #searchForm .form-row button, #searchForm .form-row input { border: 1px solid #DBDBDB; border-radius: 0; margin: 0; } #searchForm .form-row input { border-right: 0px; width: 750px; } #searchForm .form-row button { width: 50px; } #searchForm .form-row button i{ color: #FFFFFF; } #searchForm .form-row button:hover{ background: #2ED654 !important; } .form-control:focus, .btn:focus { border-color: none !important; box-shadow: none !important; } }

Related: See More

Material Kit React
Awesome Search Box
Carousel with Search
Bootstrap 4 search Bar

Questions / Comments: