1. Basic structure to call modal in our template
<div class="portfolio-item">
<img src="images/portfolio/img1.jpg" class="img-responsive" alt="" />
<div class="portfolio-caption">
<h4>Portfolio Title</h4>
<a href="#portfolio-modal" data-toggle="modal" class="link-1"><i class="fa fa-magic"></i></a>
<a href="#" class="link-2"><i class="fa fa-link"></i></a>
</div>
</div>
href="#portfolio-modal" call modal with the id. data-toggle="modal" is for open the modal.
2. Modal Structure
<div class="section-modal modal fade" id="portfolio-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="section-title text-center">
<h3>Portfolio Details</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="images/portfolio/img1.jpg" class="img-responsive" alt="..">
</div>
<div class="col-md-6">
<img src="images/portfolio/img1.jpg" class="img-responsive" alt="..">
</div>
</div><!– /.row –>
</div>
</div>
</div>
Put your contents in container.
Eager to know about bootstrap modal, Check this link – https://getbootstrap.com/docs/3.3/javascript/#modals