Bootstrap 3 Tutorial

Bootstrap 3 Filters

Last modified on: October 28, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="51ab5504-8a5a-45f7-b60a-e89b16c2ee4b" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Bootstrap 3 Filters</h3>
<p>In Bootstrap 3, "filters" typically refer to UI elements that allow users to refine or sort displayed content based on specific criteria. While Bootstrap does not have a built-in filter component, you can easily create your own filter UI using forms, dropdowns, or buttons. Below is a guide on how to implement filters using Bootstrap 3 components.</p>
<hr />
<h3>1. Basic Structure</h3>
<p>To create a filter UI, you can use a combination of form controls like dropdowns and checkboxes, along with Bootstrap&rsquo;s grid system to display the filtered results.</p>
<h4>Example Structure</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!-- Include Bootstrap CSS --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;

&lt;div class="container"&gt;
    &lt;h2&gt;Item Filter&lt;/h2&gt;

&lt;!-- Filter Section --&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-md-4"&gt;
            &lt;h4&gt;Filter by Category&lt;/h4&gt;
            &lt;select class="form-control" id="categoryFilter"&gt;
                &lt;option value=""&gt;Select Category&lt;/option&gt;
                &lt;option value="category1"&gt;Category 1&lt;/option&gt;
                &lt;option value="category2"&gt;Category 2&lt;/option&gt;
                &lt;option value="category3"&gt;Category 3&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
            &lt;h4&gt;Filter by Price Range&lt;/h4&gt;
            &lt;select class="form-control" id="priceFilter"&gt;
                &lt;option value=""&gt;Select Price Range&lt;/option&gt;
                &lt;option value="low"&gt;Low ($0 - $50)&lt;/option&gt;
                &lt;option value="medium"&gt;Medium ($51 - $150)&lt;/option&gt;
                &lt;option value="high"&gt;High ($151 - $300)&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
            &lt;h4&gt;Filter by Availability&lt;/h4&gt;
            &lt;div class="checkbox"&gt;
                &lt;label&gt;
                    &lt;input type="checkbox" id="availabilityFilter"&gt; In Stock
                &lt;/label&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;hr&gt;

&lt;!-- Filtered Results Section --&gt;
    &lt;div id="results"&gt;
        &lt;h4&gt;Results&lt;/h4&gt;
        &lt;ul class="list-group"&gt;
            &lt;li class="list-group-item"&gt;Item 1 - $30&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Item 2 - $70&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Item 3 - $120&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Item 4 - $200&lt;/li&gt;
            &lt;li class="list-group-item"&gt;Item 5 - $250&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>2. Filter Functionality with JavaScript</h3>
<p>To make the filter work, you'll need to write some JavaScript to capture the user&rsquo;s selections and filter the displayed items accordingly. Below is a basic implementation.</p>
<h4>Example JavaScript</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;script src="https://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
    $(document).ready(function() {
        $('#categoryFilter, #priceFilter, #availabilityFilter').change(function() {
            filterResults();
        });

function filterResults() {
            // Get filter values
            var category = $('#categoryFilter').val();
            var price = $('#priceFilter').val();
            var available = $('#availabilityFilter').is(':checked');

// Simulated data for filtering
            var items = [
                {name: "Item 1", price: 30, category: "category1", inStock: true},
                {name: "Item 2", price: 70, category: "category2", inStock: false},
                {name: "Item 3", price: 120, category: "category1", inStock: true},
                {name: "Item 4", price: 200, category: "category3", inStock: true},
                {name: "Item 5", price: 250, category: "category2", inStock: false}
            ];

// Filter logic
            var filteredItems = items.filter(function(item) {
                var categoryMatch = !category || item.category === category;
                var priceMatch = (price === "low" &amp;&amp; item.price &lt;= 50) ||
                                 (price === "medium" &amp;&amp; item.price &gt; 50 &amp;&amp; item.price &lt;= 150) ||
                                 (price === "high" &amp;&amp; item.price &gt; 150);
                var availabilityMatch = !available || item.inStock;

return categoryMatch &amp;&amp; priceMatch &amp;&amp; availabilityMatch;
            });

// Display filtered results
            displayResults(filteredItems);
        }

function displayResults(items) {
            var resultsContainer = $('#results ul');
            resultsContainer.empty();

if (items.length === 0) {
                resultsContainer.append('&lt;li class="list-group-item"&gt;No results found&lt;/li&gt;');
            } else {
                items.forEach(function(item) {
                    resultsContainer.append('&lt;li class="list-group-item"&gt;' + item.name + ' - $' + item.price + '&lt;/li&gt;');
                });
            }
        }
    });
&lt;/script&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Complete Example</h3>
<p>Here&rsquo;s the complete example combining HTML, CSS, and JavaScript:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Bootstrap 3 Filters Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container"&gt;
    &lt;h2&gt;Item Filter&lt;/h2&gt;

&lt;hr&gt;

&lt;!-- jQuery and Bootstrap JS --&gt;
&lt;script src="https://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
    $(document).ready(function() {
        $('#categoryFilter, #priceFilter, #availabilityFilter').change(function() {
            filterResults();
        });

return categoryMatch &amp;&amp; priceMatch &amp;&amp; availabilityMatch;
            });

// Display filtered results
            displayResults(filteredItems);
        }

function displayResults(items) {
            var resultsContainer = $('#results ul');
            resultsContainer.empty();

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Conclusion</h3>
<p>By combining Bootstrap 3 components, you can create a functional filtering system for your web applications. The example provided demonstrates how to set up a basic filter UI and implement filtering functionality using JavaScript, allowing users to easily refine displayed items based on their preferences.</p>

Web Technology View More