Adding Plugins in Bootstrap

Adding Plugins in Foundation framework is very simple. You just need to add the JS file of the plugin in the Footer (to reduce loading time) and the CSS file of the plugin in the header. That's all.

Step 1: In our example, Add script in footer like below,

<script src="js/bootstrap-lightbox.js"></script>

Step 2: In HTML, we have just add data like below.

<div class="row"><div class="col-md-2">
<a data-toggle="lightbox" href="#demoLightbox" class="thumbnail"><img src="user3.jpg" /></a></div></div>
<div id="demoLightbox" class="lightbox fade"  tabindex="-1" role="dialog" aria-hidden="true">
    <div class='lightbox-dialog'>
        <div class='lightbox-content'>
            <img src="user4.jpg">
            <div class='lightbox-caption'>
                Lightbox
            </div>
        </div>
    </div>
</div>

Step 3: Save the file and open it in your browser, the page look like this,