In this post we are giving you full screen with header search bar with background image. This is a header search box example with source code. bootstrap 4 searchBar absolute center and make it responsive. bootstrap search box with icon. stylish search box in html. bootstrap search box with dropdown.

We allows to free snippets of header with search bar bootstrap , you can download full code of bootstrap header with logo and search bar layout. Here in this post i will give you example of search bar background image css snippet and you will get simple code of html, css and jquery. In search bar background image snippet i give you three tab with html, css and js, you can easily get code of bootstrap search box with icon inside layout.

<!DOCTYPE html> <html> <head> <title></title> <link href="" rel="stylesheet"> <link rel="stylesheet" href="" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href=""> <script src=""></script> <link rel="stylesheet" type="text/css" href="custom.css"> </head> <body> <div class="container-fluid main-section"> <div class="row"> <div class="col-lg-12 text-white text-center mb-5"> <h1> Lets Us Search </h1> </div> <div class="col-lg-7 select-part-section p-2 rounded"> <div class="row"> <div class="col-lg-3"> <select class="form-control form-control-lg pull-left" placeholder="select language"> <option>Select language</option> <option>English</option> <option>Gujrati</option> <option>Hindi</option> </select> </div> <div class="col-lg-3 border-left"> <select class="form-control form-control-lg" placeholder="select language"> <option>Select Country</option> <option>India</option> <option>USA</option> <option>Japan</option> </select> </div> <div class="col-lg-3 border-left"> <select class="form-control form-control-lg pull-left" placeholder="select language"> <option> Select Company </option> <option>IT</option> <option>Managament</option> <option>Social Work</option> </select> </div> <div class="col-lg-3"> <a href="" target="_blank" class="btn btn-danger btn-block search-btn"><i class="fa fa-search" aria-hidden="true"></i></a> </div> </div> </div> </div> </div> </body> </html>
body, html { font-family: 'Roboto Condensed', sans-serif; background:linear-gradient(rgba(55,55,55, 0.1),rgba(55, 55, 55, 0.1)),url( no-repeat; background-size: cover; width: 100%; height: 100%; } .main-section{ position: absolute; background-color: rgba(0,0,0,0.5); height: 100%; padding: 150px 15px 60px 15px; } .main-section h1{ font-size:45px; } .select-part-section{ background: #fff; position: relative; left:50%; transform: translateX(-50%); border-radius: 3px 0px 0px 3px !important; } .select-part-section select{ background: #fff; } .select-part-section .form-control{ border:1px solid #fff; box-shadow: none; } .select-part-section .form-control option{ border:1px solid #fff; padding:20px !important; } .search-btn{ padding:10px; }
$('.search-btn').click(function() { location.reload(); });

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:

Random Post