Bootstrap Spacing

Filters are necessary to narrow down the data based on the required criteria.

It helps in searching data with the use of some string or other identifying variables.

A filter does not select the data for you, only provides you the most relatable option based on the criteria you set.

Bootstrap does not have a separate filtering component, but with the use of jQuery, we can design a mechanism to search for elements on the web pages.

Filter Tables

You can apply filters table data on your web-pages.

This is useful when the data is in tabular format (like a food menu with food name, picture, and price) and you can add the filter to select the desired data.

The below code illustrates the use of a jQuery filter for performing a case-insensitive search for items in a table:

Here’s the explanation for what just happened:

  • As mentioned earlier, we have used jQuery in the above code.
  • Now, here we are, basically, looping through all the rows in the table to search for the input text
  • We have used the toggle() method here. This ensures that the all the rows that do not match the input text are hidden (i.e. display: the none)
  • Another important method used here is the toLowerCase() method. As mentioned beforehand, this is a case-insensitive search. Therefore, all the input text is converted into the lower case making ‘VALUE’, ‘Value’ and ‘value’ same for the input search.

Filter Lists

Another element where a search or narrowing down of data might be needed is a list.

Here’s the code to perform the same case-insensitive search for items in a list:

Filter Dropdowns

Sometimes, the list of selectable options in the dropdowns other identifying variables too long to choose from.

Most often, this happens when you have to , from a list of colleges from all over the country while filling up your registration.

Therefore, simple code like below can help you create a filterable dropdown.

Here again, we are web pages case-insensitive search so that you can understand the example better: