Bootstrap Filters
Bootstrap doesn’t have a built-in filter component, but you can create filters using a combination of HTML, CSS, and JavaScript. Here’s an example of how to create a filterable gallery using Bootstrap:
HTML:
<!-- Filter buttons -->
<div class="btn-group" role="group" aria-label="Filter buttons">
<button type="button" class="btn btn-primary active" data-filter="all">All</button>
<button type="button" class="btn btn-primary" data-filter="nature">Nature</button>
<button type="button" class="btn btn-primary" data-filter="city">City</button>
<button type="button" class="btn btn-primary" data-filter="people">People</button>
</div>
<!-- Gallery -->
<div class="row" id="gallery">
<div class="col-md-4 nature">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Nature" data-lazy-src="image-nature.jpg"><noscript><img decoding="async" src="image-nature.jpg" alt="Nature"></noscript>
</div>
<div class="col-md-4 city">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="City" data-lazy-src="image-city.jpg"><noscript><img decoding="async" src="image-city.jpg" alt="City"></noscript>
</div>
<div class="col-md-4 people">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="People" data-lazy-src="image-people.jpg"><noscript><img decoding="async" src="image-people.jpg" alt="People"></noscript>
</div>
<div class="col-md-4 nature">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Nature" data-lazy-src="image-nature2.jpg"><noscript><img decoding="async" src="image-nature2.jpg" alt="Nature"></noscript>
</div>
<div class="col-md-4 city">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="City" data-lazy-src="image-city2.jpg"><noscript><img decoding="async" src="image-city2.jpg" alt="City"></noscript>
</div>
<div class="col-md-4 people">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="People" data-lazy-src="image-people2.jpg"><noscript><img decoding="async" src="image-people2.jpg" alt="People"></noscript>
</div>
</div>
CSS:
/* Hide non-matching gallery items */
.hide {
display: none;
}
JavaScript:
// Filter gallery based on button click
$('.btn-group button').click(function() {
var filter = $(this).attr('data-filter');
if (filter == 'all') {
$('#gallery .col-md-4').removeClass('hide');
} else {
$('#gallery .col-md-4').each(function() {
if (!$(this).hasClass(filter)) {
$(this).addClass('hide');
} else {
$(this).removeClass('hide');
}
});
}
// Set active button state
$('.btn-group button').removeClass('active');
$(this).addClass('active');
});
Bootstrap Filters
In this example, we have a set of filter buttons that use the data-filter attribute to specify which items should be displayed in the gallery. We also have a gallery of images, each of which has a class corresponding to its category (e.g. nature, city, people).
The JavaScript code listens for button clicks and filters the gallery accordingly by adding or removing the hide class on the gallery items that don’t match the selected filter. The code also sets the active state of the button that was clicked.
You can customize the appearance and behavior of the filterable gallery by adjusting the HTML, CSS, and JavaScript code. For example, you can add animation effects, use a different layout or design, or use different filter criteria.