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 amp-wp-inline-853c126eaf266fc326518efbda103661">
<!----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">
<amp-img src="//tutorialsplane.com/wp-content/uploads/2016/07/fruits-863072_960_720.jpg" class="amp-wp-inline-b11829c58083dafda1369544c67504e7 amp-wp-enforced-sizes" width="960" height="635" sizes="(min-width: 600px) 600px, 100vw"></amp-img>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--Modal ends here--->
<amp-img src="//tutorialsplane.com/wp-content/uploads/2016/07/fruits-863072_960_720.jpg" height="" width="200" sizes="(min-width: 200px) 200px, 100vw" class="amp-wp-enforced-sizes"></amp-img> <br/>
View Full Image
</div>
|
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 –