• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Filters

← Previous Next →

What are Bootstrap 4 Filters?

Bootstrap 4 Filters are tools and utilities used to refine or sort content on a webpage, often combined with Bootstrap components like cards, tables, grids, or lists. Filters allow users to find relevant information quickly, such as products in an e-commerce store, posts in a blog, or data in tables.

While Bootstrap 4 does not provide a built-in “filter” component, developers can create interactive filters using a combination of Bootstrap classes, forms, buttons, and JavaScript. Filters are essential for enhancing usability, navigation, and content discovery.

Basic Filter Layout

A simple filter uses form inputs and Bootstrap classes for styling:

<form class="form-inline mb-4">
  <input class="form-control mr-2" type="text" placeholder="Search" aria-label="Search">
  <select class="form-control mr-2">
    <option value="">Category</option>
    <option value="books">Books</option>
    <option value="electronics">Electronics</option>
  </select>
  <button class="btn btn-primary" type="submit">Filter</button>
</form>

  • .form-inline places form controls horizontally.

  • .mr-2 adds spacing between form elements.

  • Filters can include search boxes, dropdowns, checkboxes, and buttons.

Filter Cards with Bootstrap

Filters are often applied to card layouts:

<div class="row">
  <div class="col-md-4 mb-4">
    <div class="card">
      <img src="product1.jpg" class="card-img-top" alt="Product 1">
      <div class="card-body">
        <h5 class="card-title">Book</h5>
        <p class="card-text">$15</p>
      </div>
    </div>
  </div>
  <div class="col-md-4 mb-4">
    <div class="card">
      <img src="product2.jpg" class="card-img-top" alt="Product 2">
      <div class="card-body">
        <h5 class="card-title">Laptop</h5>
        <p class="card-text">$1200</p>
      </div>
    </div>
  </div>
</div>

  • Cards display individual items that can be filtered by category or search.

  • .col-md-4 ensures a responsive three-column layout on medium screens.

  • Filters help users quickly locate specific items.

Using Buttons as Filters

Buttons can be used to filter content dynamically:

<div class="btn-group mb-4" role="group">
  <button type="button" class="btn btn-primary">All</button>
  <button type="button" class="btn btn-secondary">Books</button>
  <button type="button" class="btn btn-secondary">Electronics</button>
</div>

  • Buttons allow quick category selection.

  • Active button can be highlighted using .btn-primary while inactive buttons use .btn-secondary.

  • JavaScript can toggle visibility of filtered items dynamically.

Filter with Checkboxes

Checkboxes allow multiple filter selections:

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="filter1" value="books">
  <label class="form-check-label" for="filter1">Books</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="filter2" value="electronics">
  <label class="form-check-label" for="filter2">Electronics</label>
</div>

  • .form-check-inline displays checkboxes horizontally.

  • Users can select multiple categories at once.

  • Checkboxes are ideal for multi-faceted filters like brand, price, or rating.

Filter with Range Inputs

Bootstrap 4 can style range sliders for filtering numeric values:

<label for="priceRange">Price range:</label>
<input type="range" class="form-control-range" id="priceRange" min="0" max="1000">

  • .form-control-range creates a slider input.

  • Users can filter by price, rating, or quantity.

  • Works best combined with dynamic content updates using JavaScript.

Filtered Tables

Filters are commonly applied to tables with data:

<input class="form-control mb-3" id="tableSearch" type="text" placeholder="Search table">

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Product</th>
      <th>Category</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Book</td>
      <td>Books</td>
      <td>$15</td>
    </tr>
    <tr>
      <td>Laptop</td>
      <td>Electronics</td>
      <td>$1200</td>
    </tr>
  </tbody>
</table>

  • Input field can be used with JavaScript to filter table rows.

  • .table and .table-bordered ensure structured, readable tables.

  • Works well for product listings, employee data, or reports.

Best Practices for Bootstrap 4 Filters

  1. Use clear and intuitive labels for filter options.

  2. Combine search, dropdowns, buttons, and checkboxes for versatile filtering.

  3. Keep filters visible and accessible on all devices.

  4. Highlight active filters to show what is applied.

  5. Optimize performance if filtering large datasets dynamically.

  6. Test filters for responsiveness, usability, and accessibility.

  7. Group related filters logically for easy scanning.

  8. Provide a “Reset” button to clear all applied filters.

Summary of the Tutorial

This tutorial covered Bootstrap 4 Filters, including using search inputs, buttons, checkboxes, range sliders, and tables to filter content. You learned how to create interactive, user-friendly filters for cards, tables, lists, and grids. Proper implementation of filters ensures efficient content discovery, improved navigation, and enhanced user experience on your Bootstrap-based websites.

Practice Questions

  1. Create a basic search input filter above a list of cards.

  2. Add a dropdown filter to select a category and display relevant items.

  3. Implement a button group to filter content by “All,” “Books,” and “Electronics.”

  4. Add checkboxes to allow multiple category selections for filtering cards.

  5. Create a range input slider to filter items by price.

  6. Combine a search input and category dropdown to filter a table of products.

  7. Highlight the active filter button using .btn-primary while others remain .btn-secondary.

  8. Add a reset button to clear all selected filters.

  9. Use .form-inline to arrange search and filter inputs horizontally.

  10. Apply filtering dynamically to table rows or card items using JavaScript.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top