Bootstrap Filters Advanced

Bootstrap does not include filters as a built-in component, but developers commonly use the term “Bootstrap Filters” for:

✅ Filter-style UI components (tags, pills, checkboxes, dropdown filters)
✅ AJAX/JS based dynamic filtering
✅ Table filtering (search + sorting)
✅ Category filtering using Isotope/MixItUp with Bootstrap UI
✅ Filterable gallery layouts

So — this is an advanced UI pattern, not a Bootstrap plugin.
Below are the most commonly used filtering techniques using Bootstrap.

⭐ 1. Simple Input Filter (Live Search Filter)

Filters list items as the user types.

<input class="form-control" id="searchInput" type="text" placeholder="Search...">

<ul class="list-group mt-3" id="list">
<li class="list-group-item">Java</li>
<li class="list-group-item">Python</li>
<li class="list-group-item">JavaScript</li>
<li class="list-group-item">PHP</li>
</ul>

<script>
document.getElementById('searchInput').addEventListener('keyup', function(){
let value = this.value.toLowerCase();
document.querySelectorAll('#list li').forEach(function(item){
item.style.display = item.textContent.toLowerCase().includes(value) ? '' : 'none';
});
});
</script>

<li class="list-group-item">Python</li>

<li class="list-group-item">JavaScript</li>

</ul>

document.getElementById('searchInput').addEventListener('keyup', function(){

let value = this.value.toLowerCase();

document.querySelectorAll('#list li').forEach(function(item){

item.style.display = item.textContent.toLowerCase().includes(value) ? '' : 'none';

});

</script>

⭐ 2. Bootstrap Button Filters (Category Filtering)

<div class="btn-group mb-3" data-filter-group>
<button class="btn btn-primary active" data-filter="all">All</button>
<button class="btn btn-primary" data-filter="web">Web</button>
<button class="btn btn-primary" data-filter="ai">AI</button>
<button class="btn btn-primary" data-filter="mobile">Mobile</button>
</div>

<div class="row" id="items">
<div class="col-md-4 filter-item web"><div class="card p-3">HTML</div></div>
<div class="col-md-4 filter-item ai"><div class="card p-3">Machine Learning</div></div>
<div class="col-md-4 filter-item mobile"><div class="card p-3">Flutter</div></div>
</div>

<script>
let buttons = document.querySelectorAll('[data-filter-group] button');
buttons.forEach(btn => {
btn.addEventListener('click', function(){
buttons.forEach(b => b.classList.remove('active'));
this.classList.add('active');
let category = this.getAttribute('data-filter');
document.querySelectorAll('.filter-item').forEach(item => {
item.style.display = (category == 'all' || item.classList.contains(category)) ? '' : 'none';
});
});
});
</script>

<button class="btn btn-primary" data-filter="mobile">Mobile</button>

</div>

<div class="col-md-4 filter-item ai"><div class="card p-3">Machine Learning</div></div>

<div class="col-md-4 filter-item mobile"><div class="card p-3">Flutter</div></div>

</div>

let buttons = document.querySelectorAll('[data-filter-group] button');

buttons.forEach(btn => {

btn.addEventListener('click', function(){

buttons.forEach(b => b.classList.remove('active'));

this.classList.add('active');

let category = this.getAttribute('data-filter');

document.querySelectorAll('.filter-item').forEach(item => {

item.style.display = (category == 'all' || item.classList.contains(category)) ? '' : 'none';

});

</script>

⭐ 3. Filter UI with Pills (Tag-based Multi Filtering)

<div class="btn-group mb-3">
<label class="btn btn-outline-dark">
<input type="checkbox" class="filter-checkbox" value="frontend"> Frontend
</label>
<label class="btn btn-outline-dark">
<input type="checkbox" class="filter-checkbox" value="backend"> Backend
</label>
<label class="btn btn-outline-dark">
<input type="checkbox" class="filter-checkbox" value="design"> Design
</label>
</div>

<div class="row" id="projects">
<div class="col-md-4 project frontend">React JS</div>
<div class="col-md-4 project backend">Node.js</div>
<div class="col-md-4 project design">UI/UX</div>
<div class="col-md-4 project frontend backend">Full Stack</div>
</div>

<script>
const checkboxes = document.querySelectorAll(".filter-checkbox");
checkboxes.forEach(cb => cb.addEventListener("change", filterItems));

function filterItems() {
let filters = [...checkboxes].filter(x => x.checked).map(x => x.value);

document.querySelectorAll(".project").forEach(item => {
let match = filters.length === 0 || filters.some(f => item.classList.contains(f));
item.style.display = match ? "" : "none";
});
}
</script>

<input type="checkbox" class="filter-checkbox" value="frontend"> Frontend

</label>

<input type="checkbox" class="filter-checkbox" value="backend"> Backend

</label>

<input type="checkbox" class="filter-checkbox" value="design"> Design

</label>

</div>

<div class="col-md-4 project frontend">React JS</div>

<div class="col-md-4 project frontend backend">Full Stack</div>

</div>

const checkboxes = document.querySelectorAll(".filter-checkbox");

checkboxes.forEach(cb => cb.addEventListener("change", filterItems));

function filterItems() {

let filters = [...checkboxes].filter(x => x.checked).map(x => x.value);

document.querySelectorAll(".project").forEach(item => {

let match = filters.length === 0 || filters.some(f => item.classList.contains(f));

item.style.display = match ? "" : "none";

});

}

</script>

⭐ 4. Bootstrap Table Filter (Search + Column Filter)

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

<table class="table table-striped">
<thead>
<tr><th>Name</th><th>Role</th></tr>
</thead>
<tbody id="tableRows">
<tr><td>Alice</td><td>Developer</td></tr>
<tr><td>John</td><td>Designer</td></tr>
<tr><td>Sara</td><td>Manager</td></tr>
</tbody>
</table>

<script>
document.getElementById("tableFilter").addEventListener("keyup", function() {
let value = this.value.toLowerCase();
document.querySelectorAll("#tableRows tr").forEach(row => {
row.style.display = row.textContent.toLowerCase().includes(value) ? "" : "none";
});
});
</script>

<thead>

</thead>

<tr><td>Alice</td><td>Developer</td></tr>

<tr><td>John</td><td>Designer</td></tr>

<tr><td>Sara</td><td>Manager</td></tr>

</tbody>

</table>

document.getElementById("tableFilter").addEventListener("keyup", function() {

let value = this.value.toLowerCase();

document.querySelectorAll("#tableRows tr").forEach(row => {

row.style.display = row.textContent.toLowerCase().includes(value) ? "" : "none";

});

</script>

🧠 Summary of Bootstrap Filter Types

Filter Type	Use Case	Difficulty
Text Search Filter	Live filtering lists	⭐ Easy
Category Buttons	Gallery filtering	⭐⭐ Medium
Multi Checkbox Filters	Marketplace/product filters	⭐⭐⭐ Advanced
Table Searching/Sorting	Admin dashboards	⭐⭐ Medium

🚀 Optional: Advanced Filter Libraries with Bootstrap

Library	Feature
Isotope.js	Advanced filtering + animation
MixItUp	Sorting + filtering grids
DataTables.js	Table search, pagination, sorting

💡 These integrate perfectly with Bootstrap UI.

Bootstrap Filters Advanced

⭐ 1. Simple Input Filter (Live Search Filter)

⭐ 2. Bootstrap Button Filters (Category Filtering)

⭐ 3. Filter UI with Pills (Tag-based Multi Filtering)

⭐ 4. Bootstrap Table Filter (Search + Column Filter)

🧠 Summary of Bootstrap Filter Types

🚀 Optional: Advanced Filter Libraries with Bootstrap

You may also like...

Bootstrap 3 Tutorial

Bootstrap Grids

Bootstrap Filters Advanced

⭐ 1. Simple Input Filter (Live Search Filter)

⭐ 2. Bootstrap Button Filters (Category Filtering)

⭐ 3. Filter UI with Pills (Tag-based Multi Filtering)

⭐ 4. Bootstrap Table Filter (Search + Column Filter)

🧠 Summary of Bootstrap Filter Types

🚀 Optional: Advanced Filter Libraries with Bootstrap

You may also like...

Bootstrap Media Objects

Bootstrap Forms

Bootstrap Glyphicons

Bootstrap 3 Tutorial

Bootstrap Grids