Bootstrap Snippet Bootstrap 4 Gallery Filtering using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fulid">
        <div class="card">
            <div class="card-header text-center display-4">
                Gallery
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <button class="btn btn-outline-success filter-button" data-filter="all">সব জেলা</button>
                        <button class="btn btn-outline-success filter-button" data-filter="dhaka">ঢাকা</button>
                        <button class="btn btn-outline-success filter-button" data-filter="mymensingh">ময়মনসিংহ</button>
                        <button class="btn btn-outline-success filter-button" data-filter="rajshahi">রাজশাহী</button>
                        <button class="btn btn-outline-success filter-button" data-filter="khulna">খুলনা</button>
                        <button class="btn btn-outline-success filter-button" data-filter="chittagong">চট্টগ্রাম</button>
                        <button class="btn btn-outline-success filter-button" data-filter="sylhet">সিলেট</button>
                        <button class="btn btn-outline-success filter-button" data-filter="barisal">বরিশাল</button>
                        <button class="btn btn-outline-success filter-button" data-filter="rangpur">রংপুর</button>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-md-3 filter_box filter dhaka">
                        <div class="single-district">
                            <a href="#">
                                <h3>ঢাকা</h3>
                                <p><strong>বিভাগ:</strong> ঢাকা </p>                          
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3 filter_box filter rajshahi">
                        <div class="single-district">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.filter_box {
        padding-right: 5px;
        padding-left: 5px;
        margin-bottom: 10px;
    }
    .single-district {
        background: #daeddc;
        color: #fff;
        border:2px solid #009966;
        display: block;
        text-align: center;
    }
    .single-district h3 {
        font-weight: 700;
    }
    .single-district p {
        font-size: 15px;
        margin: 8px;
    }
    .single-district a {
        color: #000;
        display: block;
        padding: 15px;
    }
    .single-district a:hover {
        color: red;
        text-decoration: none;
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(document).ready(function(){
            $(".filter-button").click(function(){
                var value = $(this).attr('data-filter');
                
                if(value == "all")
                {
                    //$('.filter').removeClass('hidden');
                    $('.filter').show('1000');
                }
                else
                {
        //            $('.filter[filter-item="'+value+'"]').removeClass('hidden');
        //            $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
                    $(".filter").not('.'+value).hide('3000');
                    $('.filter').filter('.'+value).show('3000');
                    
                }
            });
            
            if ($(".filter-button").removeClass("active")) {
                $(this).removeClass("active");
            }
            $(this).addClass("active");
        });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap 4 Gallery Filtering"
Bootstrap 4.1.1 Snippet by ashifulcse

Related: See More

Questions / Comments:

"Bootstrap 4 Gallery Filtering" Bootstrap 4.1.1 Snippet by ashifulcse

Related: See More

Questions / Comments:

"Bootstrap 4 Gallery Filtering"
Bootstrap 4.1.1 Snippet by ashifulcse