"Search Bar"
Bootstrap 4.1.1 Snippet by gagannarli

Post to Facebook Tweet this

<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 ----------> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="Searchbar.css"> <title>Searchbar</title> <style> body { background-image: url('image.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } </style> </head> <body> <div class="header"> <form> <h1 class="h12"><b>Find Everything</b></h1> <div class="form-box"> <input type="text" class="search-field business" placeholder="Business,Services..." /> <input type="text" class="search-field location" placeholder="Location" /> <button class="search-btn" type="button">Search</button> </div> </form> </div> </body> </html>
* { margin:0px; padding:0px; } .header { height:100hv; display:flex; justify-content:center; aligh-items:center; font-family:Arial, Helvetica, sans-serif; margin-top:200px; } .h12 { text-align:center; font-family:Arial, Helvetica, sans-serif; margin-bottom:30px; font-size:50px; letter-spacing:2px; } .search-field { height:50px; padding:20px; border:none; border-radius:25px; outline:none; } .business { width:400px; } .location { width:200px; } .search-btn { height:50px; width:150px; background:#527375; border:none; color:#000; border-radius:25px; } .search-btn:hover { background:#333333; color:white; } .form-box { background:rgba(1,0,0,0.5); padding:30px; }

Related: See More

Paper Kit
Awesome Search Box
Carousel with Search
Bootstrap 4 search Bar

Questions / Comments: