Bootstrap search box with additional filters – 2 demos

The search box using Bootstrap

In this post, a search box based on Bootstrap is created along with additional filters in the dropdown. By default, only the textbox to enter the search term with a button is displayed. There is a dropdown option towards the right corner of the search box that allows filtering the results.

You may change the dropdown options as per the need of your website. For example, if this is an e-commerce website, you may add pricing option, categories filter etc.

Have a look in the section below for a live demo and to get the code for Bootstrap search box.

A demo of search in Bootstrap

In this demo, I have used a few search filters for the illustration purpose only. The main search box along with a dropdown to open the added filters is given. Inside the main dropdown, another dropdown to narrow the search is used. After that, a few textboxes for the category, brand and price filters are used. Have a look at live demo:

bootstrap search

See online demo and code

The markup:

 

You need to include the following dependency files in order to make it work:

  • Bootstrap CSS file
  • Bootstrap JS file
  • jQuery library

Most probably, you are already using this for your Bootstrap based web project.

Style number 2 for search box demo

By simply adding a class for input fields with the background and box-shadow properties using gradient, see the same example with different style of boxes including the search box:

bootstrap search style

See online demo and code

The CSS used in the demo:

 

While markup almost remains the same as in above example. See the complete code and live demo by clicking the image or demo link.