Portfolio Modal

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

Was this article helpful to you? Yes No

How can we help?