Bootstrap 4 Filters (Advanced)

Welcome to The Coding College! In this advanced tutorial, we’ll explore how to create and apply filters in your Bootstrap 4 projects. While Bootstrap 4 doesn’t include built-in filter utilities like CSS filters or content filtering components, you can leverage custom CSS, JavaScript, and third-party libraries to create interactive and visually engaging filtered content.

What Are Filters in Web Design?

Filters are used to:

  • Visually modify elements: Using CSS filter properties like blur, grayscale, or brightness.
  • Content filtering: Dynamically sort or display specific content (e.g., portfolio galleries, product categories).

We’ll cover both CSS Filters for visual effects and Content Filtering for dynamic functionality.

1. CSS Filters for Visual Effects

CSS filters allow you to add visual effects directly to your elements. These effects can be applied to images, text, or entire sections.

Available CSS Filter Properties

PropertyDescriptionExample
blurBlurs the element.filter: blur(5px);
grayscaleConverts the element to grayscale.filter: grayscale(100%);
brightnessAdjusts the brightness of the element.filter: brightness(1.5);
contrastAdjusts the contrast of the element.filter: contrast(200%);
opacityAdjusts the transparency of the element.filter: opacity(0.5);
saturateIncreases or decreases color saturation.filter: saturate(2);
sepiaApplies a sepia tone to the element.filter: sepia(80%);

Example: Applying CSS Filters to Images

<div class="container text-center">
  <h2 class="mb-4">CSS Filters on Images</h2>
  <img src="https://via.placeholder.com/300" class="img-fluid mb-3" style="filter: grayscale(100%);">
  <img src="https://via.placeholder.com/300" class="img-fluid mb-3" style="filter: blur(5px);">
  <img src="https://via.placeholder.com/300" class="img-fluid" style="filter: brightness(1.5);">
</div>

Explanation:

  • The filter property is applied directly to the image using inline styles.
  • You can combine multiple filters: 
filter: grayscale(50%) brightness(1.2);

Example: Adding Hover Effects

Enhance interactivity by applying filters on hover.

<div class="container text-center">
  <h2 class="mb-4">Hover Effects with CSS Filters</h2>
  <img src="https://via.placeholder.com/300" class="img-fluid filter-hover">
</div>

<style>
  .filter-hover {
    transition: filter 0.3s ease;
  }

  .filter-hover:hover {
    filter: sepia(100%);
  }
</style>

Key Notes:

  • The transition property ensures a smooth effect.
  • Modify filter-hover:hover to apply different filters.

2. Content Filtering with JavaScript

Content filtering dynamically shows or hides elements based on user input or categories. This is often used in portfolios, product listings, or searchable tables.

Example: Filtering with Buttons

<div class="container text-center">
  <h2 class="mb-4">Content Filtering</h2>
  <div class="btn-group mb-4">
    <button class="btn btn-primary filter-btn" data-filter="all">All</button>
    <button class="btn btn-secondary filter-btn" data-filter="category1">Category 1</button>
    <button class="btn btn-secondary filter-btn" data-filter="category2">Category 2</button>
  </div>

  <div class="row">
    <div class="col-md-4 filter-item category1">
      <div class="card">
        <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
        <div class="card-body">
          <p class="card-text">Item in Category 1</p>
        </div>
      </div>
    </div>
    <div class="col-md-4 filter-item category2">
      <div class="card">
        <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
        <div class="card-body">
          <p class="card-text">Item in Category 2</p>
        </div>
      </div>
    </div>
    <div class="col-md-4 filter-item category1">
      <div class="card">
        <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
        <div class="card-body">
          <p class="card-text">Another item in Category 1</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  const filterButtons = document.querySelectorAll('.filter-btn');
  const filterItems = document.querySelectorAll('.filter-item');

  filterButtons.forEach(button => {
    button.addEventListener('click', () => {
      const filter = button.getAttribute('data-filter');

      filterButtons.forEach(btn => btn.classList.remove('btn-primary'));
      button.classList.add('btn-primary');

      filterItems.forEach(item => {
        if (filter === 'all' || item.classList.contains(filter)) {
          item.style.display = 'block';
        } else {
          item.style.display = 'none';
        }
      });
    });
  });
</script>

Explanation:

  • HTML: Each item has a category class (e.g., category1).
  • JavaScript: Filters items based on the button’s data-filter attribute.
  • CSS Transition (Optional): Add smooth animations when showing or hiding items.

Example: Searchable Table

Use Bootstrap and JavaScript to filter table rows based on search input.

<div class="container">
  <h2 class="mb-4">Searchable Table</h2>
  <input type="text" id="searchInput" class="form-control mb-3" placeholder="Search for items...">
  
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Name</th>
        <th>Category</th>
      </tr>
    </thead>
    <tbody id="tableBody">
      <tr>
        <td>Apple</td>
        <td>Fruit</td>
      </tr>
      <tr>
        <td>Carrot</td>
        <td>Vegetable</td>
      </tr>
      <tr>
        <td>Orange</td>
        <td>Fruit</td>
      </tr>
    </tbody>
  </table>
</div>

<script>
  document.getElementById('searchInput').addEventListener('input', function() {
    const filter = this.value.toLowerCase();
    const rows = document.querySelectorAll('#tableBody tr');

    rows.forEach(row => {
      const text = row.innerText.toLowerCase();
      row.style.display = text.includes(filter) ? '' : 'none';
    });
  });
</script>

Tips for Advanced Filters

  1. Use Bootstrap Utilities: Combine Bootstrap’s grid, spacing, and display utilities for responsive layouts.
  2. Third-Party Libraries: Libraries like MixItUp or Isotope can simplify advanced content filtering.
  3. Animations: Use transition or animate.css to make the filtering process smoother.
  4. ARIA Roles for Accessibility: Ensure buttons and inputs have appropriate roles and labels.

Conclusion

Bootstrap 4 Filters, whether for visual effects or dynamic content filtering, can significantly enhance your website’s functionality and user experience. By combining Bootstrap 4’s flexible grid system with CSS and JavaScript, you can create stunning and interactive web components.

Leave a Comment