<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="//code.jquery.com/jquery-1.11.1.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"> <a href="#"> <h3>রাজশাহী</h3> <p><strong>বিভাগ:</strong> রাজশাহী </p> </a> </div> </div> <div class="col-md-3 filter_box filter mymensingh"> <div class="single-district"> <a href="#"> <h3>জামালপুর</h3> <p><strong>বিভাগ:</strong> ময়মনসিংহ </p> </a> </div> </div> <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 dhaka"> <div class="single-district"> <a href="#"> <h3>গাজীপুর</h3> <p><strong>বিভাগ:</strong> ঢাকা </p> </a> </div> </div> <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 dhaka"> <div class="single-district"> <a href="#"> <h3>কিশোরগঞ্জ</h3> <p><strong>বিভাগ:</strong> ঢাকা </p> </a> </div> </div> <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 dhaka"> <div class="single-district"> <a href="#"> <h3>মানিকগঞ্জ</h3> <p><strong>বিভাগ:</strong> ঢাকা </p> </a> </div> </div> <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 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"> <a href="#"> <h3>বগুড়া</h3> <p><strong>বিভাগ:</strong> রাজশাহী </p> </a> </div> </div> <div class="col-md-3 filter_box filter rajshahi"> <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"> <a href="#"> <h3>নওগাঁ</h3> <p><strong>বিভাগ:</strong> রাজশাহী </p> </a> </div> </div> <div class="col-md-3 filter_box filter rajshahi"> <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"> <a href="#"> <h3>চাঁপাইনবাবগঞ্জ</h3> <p><strong>বিভাগ:</strong> রাজশাহী </p> </a> </div> </div> <div class="col-md-3 filter_box filter rajshahi"> <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"> <a href="#"> <h3>সিরাজগঞ্জ</h3> <p><strong>বিভাগ:</strong> রাজশাহী </p> </a> </div> </div> </div> </div> </div> </div>

.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; }

$(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"); });