Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Filters

Bootstrap does not have a component that allows filtering. However, jQuery can be used to filter/search for specific element(s) in a group of elements.


Filter Tables

The following example performs a case-insensitive search for items in a table:

Type something in the input field to search the table for names, cities or phones:

Name City Phone
Vishal Delhi 999945850
Espy Mizoram 8425896528
Mudit Jaipur 9858621233
Ankit Mumbai 9560478555
Nancy Delhi 9210154545
Run code

Example explained:

  • The filter() method check if there are any text values that matches the value of the input field
  • The toggle() method hides the row that does not match the search
  • The toLowerCase() method to convert the text to lower case, which makes the search case insensitive


Filter Lists

The following example performs a case-insensitive search for items in a list:

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

  • London
  • Delhi
  • Beijing
  • Mumbai
  • Bengaluru
Run code

Filter Other Elements

The following example performs a case-insensitive search inside a DIV element:

Type something in the input field to search for elements:

This is first Paragraph.

This is second Paragraph.

This is a DIV element.

This is last Paragraph.

Run code