THE WORLD'S LARGEST WEB DEVELOPER SITE

Bootstrap 4 Filters (Advanced)


Bootstrap 4 Filters

Bootstrap does not have a component that allows filtering. However, we can use jQuery to filter / search for elements.


Filter Tables

Perform a case-insensitive search for items in a table:

Example

Type something in the input field to search the table for first names, last names or emails:


Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@mail.com
July Dooley july@greatstuff.com
Anja Ravendale a_r@test.com

jQuery

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
Try it Yourself »

Example explained: We use jQuery to loop through each table rows to check if there are any text values that matches the value of the input field. The toggle method hides the row (display:none) that does not match the search. We use the toLowerCase() method to convert the text to lower case, which makes the search case insensitive (allows "john", "John", and even "JOHN" on search).


Filter Lists

Perform a case-insensitive search for items in a list:

Example

Type something in the input field to search the list for items:


  • First item
  • Second item
  • Third item
  • Fourth
Try it Yourself »

Filter Anything

Perform a case-insensitive search for text inside a div element:

Example


I am a paragraph.

I am a div element inside div.

Another paragraph.

Try it Yourself »