Bootstrap Snippet Custom jQuery Filter Portfolio Nav 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 ---------->
    
    <script type="text/javascript" src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
    
 
 <section class="gallery-section">
     <div class="container">
      <div class="row">
       <div class="col-lg-4 col-md-12">
       <div class="title-gallery">
        <h3> Our Picture <br> Gallery</h3>
        <p>Short one liner description about the section</p>
       </div>
        <div class="filters filter-button-group">
         <ul class="tabs">
            <li class="active" data-filter="*"> <img src="https://i.ibb.co/8mY7SgC/singing.png" alt=""> <span>  All </span>  </li>
            <li data-filter=".dance"> <img src="https://i.ibb.co/PzcJ0Ly/dance.png" alt=""> <span>  Dance </span>  </li>
            <li data-filter=".music"> <img src="https://i.ibb.co/h293fT9/music.png" alt=""> <span> Music </span>  </li>
            <li data-filter=".art"> <img src="https://i.ibb.co/KGcH3nB/art.png" alt=""> <span> Art </span>  </li>
            <li data-filter=".theatre"> <img src="https://i.ibb.co/sCnqrZQ/theater.png" alt="">  <span> Theatre </span>  </li>
            <li data-filter=".drama"><img src="https://i.ibb.co/9yQNYw5/drama.png" alt=""> <span> Drama </span>  </li>
            <li data-filter=".singing"><img src="https://i.ibb.co/8mY7SgC/singing.png" alt=""> <span> Singing </span>  </li>
         </ul>
         
         <a href="#" class="view-button"> View Gallery > </a>
        </div>
       </div>
       
       <div class="col-lg-8 col-md-12">
        <div class="gallery-filter-box">
         <ul class="list-inline grid">
          <li class="music grid-item"> <img src="https://i.ibb.co/stJgJCR/img-7.png" alt=""></li>
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
35
36
37
ul.tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul.tabs li {
    cursor: pointer;
    width: 45%;
    padding:6px;
    display: inline-block;
    margin-bottom: 20px;
    border-radius: 50px;
    transition: 0.5s ease;
    box-shadow: 1px 1px 15px 1px #00000017;
}
ul.tabs li.active{
    background: #217AF0;
    color: #fff;
    transition: 0.5s ease;
    box-shadow: 1px 1px 15px 1px #217af082;
}
.tab-content{
    display: none;
    background: #ededed;
    padding: 15px;
}
.tab-content.current{
    display: inherit;
}
.gallery-filter-box .grid{
    /* display: flex; */
    column-count: 4;
    column-gap:5px;
}
ul.tabs li span {
    font-weight: 550;
    padding-left: 10px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
     $(document).ready( function() {   
        $('.grid').isotope({
          itemSelector: '.grid-item',
        });
        // filter items on button click
        $('.filter-button-group').on( 'click', 'li', function() {
          var filterValue = $(this).attr('data-filter');
          $('.grid').isotope({ filter: filterValue });
          $('.filter-button-group li').removeClass('active');
          $(this).addClass('active');
        });
     })
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Custom jQuery Filter Portfolio Nav"
Bootstrap 4.1.1 Snippet by Naveen Mandwariya

Related: See More

Questions / Comments:

"Custom jQuery Filter Portfolio Nav" Bootstrap 4.1.1 Snippet by Naveen Mandwariya

Related: See More

Questions / Comments:

"Custom jQuery Filter Portfolio Nav"
Bootstrap 4.1.1 Snippet by Naveen Mandwariya