How to create load more button in bootstrap?

JavaScript
1

Hi everyone!

I am trying to create a Load more button just like this but I have no idea how it can be achieve in bootstrap.
what i want is load more IMAGES when I click on load more button.

**similar example on this page:**https://fooplugins.github.io/foogallery-client-side/docs/paging/loadMore.html
&& http://demo.makitweb.com/loadmore/

look:

1204×718 420 KB

bootstrap code:

<section id="section14" class="section-margine">
  <div class="container" style="margin-bottom:40px;">
   
     <div class="col-md-10 col-md-10">
        

	   <div class="portfolioContainer">
          <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 objects text-center"> <a class="magnific-popup" href="images/portfolio/1.jpg"><img src="images/portfolio/1.jpg" class="img-responsive wow zoomIn" alt="image"></a> </div>
          <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 people places text-center"> <a class="magnific-popup" href="images/portfolio/2.jpg"><img src="images/portfolio/2.jpg" class="img-responsive wow zoomIn" alt="image"></a> </div>
          <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 food text-center"><a class="magnific-popup" href="images/portfolio/3.jpg"> <img src="images/portfolio/3.jpg" alt="image" class="img-responsive wow zoomIn"></a> </div>
          <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 people places text-center"><a class="magnific-popup" href="images/portfolio/4.jpg"> <img src="images/portfolio/4.jpg" alt="image" class="img-responsive wow zoomIn"></a> </div>
          <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 places objects text-center"><a class="magnific-popup" href="images/portfolio/5.jpg"> <img src="images/portfolio/5.jpg" alt="image" class="img-responsive wow zoomIn"></a> </div>
          <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 people food objects text-center"><a class="magnific-popup" href="images/portfolio/6.jpg"> <img src="images/portfolio/6.jpg" alt="image" class="img-responsive wow zoomIn"></a> </div>
          <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 food objects text-center"><a class="magnific-popup" href="images/portfolio/7.jpg"> <img src="images/portfolio/7.jpg" alt="image" class="img-responsive wow zoomIn"></a> </div>
          <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 food text-center"><a class="magnific-popup" href="images/portfolio/8.jpg"> <img src="images/portfolio/8.jpg" alt="image" class="img-responsive wow zoomIn"></a> </div>
          <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 people food objects text-center"><a class="magnific-popup" href="images/portfolio/9.jpg"> <img src="images/portfolio/9.jpg" alt="image" class="img-responsive wow zoomIn"></a> </div>
          <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 food objects text-center"><a class="magnific-popup" href="images/portfolio/1.jpg"> <img src="images/portfolio/1.jpg" alt="image" class="img-responsive wow zoomIn"></a> </div>
          <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 food text-center"><a class="magnific-popup" href="images/portfolio/2.jpg"> <img src="images/portfolio/2.jpg" alt="image" class="img-responsive wow zoomIn"></a> </div>
          <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 people food objects text-center"><a class="magnific-popup" href="images/portfolio/3.jpg"> <img src="images/portfolio/3.jpg" alt="image" class="img-responsive wow zoomIn"></a> </div>
       

	   </div>
      </div>   
</div>
      
    
  
</section>

Any help is appreciated.
Thankyou very much.

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.