Hi to all:
I need urgent a tutorial mixitup with bootstrap 4 but I already find tutorial bootstrap 4 with mixitup error code html and js not working click any tabs change photos 
below code:
HTML:
<section class="projects" id="projects"> <div class="container"> <div class="row"> <div class="col-12"> <div class="txtProjects"> <h1>Projects</h1> <h2>Projects</h2> </div> </div> <div class="container"> <div class="col-12"> <div class="controls imgCenter1"> <button type="button" class="control btnPink1 margin-right btn btn-filter" data-filter="all"">All</button> <button type="button" class="control btnPink1 margin-right btn btn-filter" data-filter=".web">Web Design</button> <button type="button" class="control btnPink1 margin-right btn btn-filter" data-filter=".animation">Animation</button> <button type="button" class="control btnPink1 btn btn-filter" data-filter=".photography">Photography</button> </div> <hr> </div> </div> <div class="container"> <div class="row"> <div class="col-12"> <div class="mixitupContainer"> <div class="row"> <div class="col-lg-4 col-md-6 col-sm-6 mix all padding-bottom2"> <a data-toggle="modal" data-target=".gif-1-modal"> <div class="imgProject1"> <div class="groupProject"> <h1>01</h1><div class="line1"></div><h1>Web Design</h1> <h2>Draw Mockup</h2> </div> </div> </a> </div> <div class="col-lg-4 col-md-6 col-sm-6 mix animation padding-bottom2"> <a data-toggle="modal" data-target=".gif-1-modal"> <div class="imgProject2"> <div class="groupProject"> <h1>02</h1><div class="line1"></div><h1>Animation</h1> <h2>Draw Geometric</h2> </div> </div> </a> </div> <div class="col-lg-4 col-md-6 col-sm-6 mix web padding-bottom2"> <a data-toggle="modal" data-target=".gif-1-modal"> <div class="imgProject3"> <div class="groupProject"> <h1>03</h1><div class="line1"></div><h1>Web Design</h1> <h2>Pc Projects</h2> </div> </div> </a> </div> <div class="col-lg-4 col-md-6 col-sm-6 mix web padding-bottom3"> <a data-toggle="modal" data-target=".gif-1-modal"> <div class="imgProject4"> <div class="groupProject"> <h1>04</h1><div class="line1"></div><h1>Web Design</h1> <h2>Mockup</h2> </div> </div> </a> </div> <div class="col-lg-4 col-md-6 col-sm-6 mix photography padding-bottom3"> <a data-toggle="modal" data-target=".gif-1-modal"> <div class="imgProject5"> <div class="groupProject"> <h1>05</h1><div class="line1"></div><h1>Photography</h1> <h2>Clock</h2> </div> </div> </a> </div> <div class="col-lg-4 col-md-6 col-sm-6 mix photography"> <a data-toggle="modal" data-target=".gif-1-modal"> <div class="imgProject6"> <div class="groupProject"> <h1>06</h1><div class="line1"></div><h1>Photography</h1> <h2>Pencils</h2> </div> </div> </a> </div> </div> </div> </div> </div> </div> <!-- Modal 1 --> <div class="modal fade gif-1-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <img src="http://placehold.it/500x500" class="img-responsive center-block"> </div> </div> </div> </div> </div> </section>
JS:
$(function(){ $('.mixitupContainer').mixItUp({ load: { filter: '' }, controls: { toggleFilterButtons: true, toggleLogic: 'and' }, callbacks: { onMixEnd: function(state){ console.log(state.activeFilter) } } }); });
Screenshots:
You see not click any tabs change photos.
Please help me thanks.
Regards.
JeriTeam.