Bootstrap display image in modal


Bootstrap display image in modal – Sometimes we need to display image in bootstrap modal. There are many ways to show an image in bootstrap modal. Here in this tutorial we are going to explain how you can display an image in bootstrap modal. You can also use our online editor to edit and run the code online.


Bootstrap display image in modal Example

You can display image in bootstrap modal simply as below-

Bootstrap display image in modal Example:

<div class="container" style="padding:50px;">

   <!----modal starts here--->
<div id="tutorialsplaneModal" class="modal fade" role='dialog'>
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Tutorialsplane Modal Demo : Image in Modal</h4>
            </div>
            <div class="modal-body">
                         <img src="//tutorialsplane.com/wp-content/uploads/2016/07/fruits-863072_960_720.jpg" style="width:100%;height:100%;">       
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
      </div>
  </div>
<!--Modal ends here--->

<a href="javascript:void(0);" class="" data-toggle="modal" data-target="#tutorialsplaneModal">
  <img src="//tutorialsplane.com/wp-content/uploads/2016/07/fruits-863072_960_720.jpg" height="200px;" width="200px"> <br>  
View Full Image

</a>
</div>

Try it »

In the above example we have displayed the image in bootstrap modal. If you click on the thumbnail of the image it will open a modal containing the full image.
If you run the above example it will produce output something like this –

Bootstrap display image in modal


Advertisements

Add Comment

📖 Read More