In this bootstrap 4 advance search or filter design example using html and css. this advance search dropdown design you can use in header navbar. you can use multiple input in dropdowm. this advance search design support all the browser. we can also use in header navbar search. this filter design also you can customized esaly.

We allows to free snippets of bootstrap advanced search , you can download full code of bootstrap advanced search filter layout. Here in this post i will give you example of bootstrap advanced dropdown search snippet and you will get simple code of html, css and jquery. In bootstrap search dropdown example snippet i give you three tab with html, css and js, you can easily get code of bootstrap navbar search layout.


<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-6 offset-lg-3 col-sm-8 offset-sm-2 col-12"> <h3 class="text-center text-light">Advance search with bootstrap 4</h3> <div class="input-group" id="adv-search"> <input type="text" class="form-control form-control-search" placeholder="Search for snippets" /> <div class="input-group-btn"> <div class="btn-group" role="group"> <div class="dropdown dropdown-lg"> <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> </button> <div class="dropdown-menu dropdown-menu-right" role="menu"> <form> <div class="form-group"> <label for="category" class="text-dark">Category</label> <select class="form-control" id="category"> <option>All Snippets</option> <option>Featured</option> <option>Most Popular</option> <option>Most Commented</option> <option>Most Liked</option> </select> </div> <div class="form-group"> <label for="designer">Designer</label> <input type="text" class="form-control" id="designer" placeholder="Enter designer name"> </div> <div class="form-group"> <label for="contain_word">Contains Words</label> <input type="text" class="form-control" id="contain_word" placeholder="Enter contain words"> </div> <div class="form-group"> <label>Color</label><br> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Red</span> </label> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Blue</span> </label> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">All</span> </label> </div> <div class="form-group"> <label>Custom JS</label><br> <label class="custom-control custom-radio"> <input id="radio1" name="radio" type="radio" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Yes</span> </label> <label class="custom-control custom-radio"> <input id="radio2" name="radio" type="radio" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">No</span> </label> </div> <hr> <div class="form-group text-center"> <button type="submit" class="btn btn-primary">Search</button> </div> </form> </div> </div> <button type="submit" class="btn btn-primary"><span class="fa fa-search" aria-hidden="true"></span></button> </div> </div> </div> </div> </div> </div> </body> </html>
body { padding-top: 50px; background-color: #FE7878; } label{ font-weight: 600; } .custom-control{ font-weight: normal; } .dropdown-toggle{ padding-left: 10px; border-radius: 0px !important; } .dropdown.dropdown-lg .dropdown-menu { padding: 15px; } .input-group .form-control{ width: 100%; border-radius: 0.25rem !important; } .dropdown.dropdown-lg .dropdown-menu{ min-width: 320px; } .dropdown-menu{ box-shadow: 1px 4px 8px -1px #c1c1c1; }

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





Random Post


Random Blog