How to fit the image into modal popup using Bootstrap?

Modal plugin allows us to add a dialog popup window that is displayed on top of the current page. Bootstrap provides an easy, yet effective way to incorporate modal into our web pages. Modal can consist of any content along with a header and footer.

Images can be fitted in modal popup using Bootstrap by including <img> tag in the "modal-body" div. The "modal-body" div determines the main content of modal popup. By using the <img> tag, an image can be inserted into it.

This is illustrated in the following example:

Example 1:

Output:

👁 Image

Example 2: Here an image has been used instead of the button, which triggers modal popup on click. The content of modal has been center aligned using "text-align: center". Class "w-100" has been added to modal title so that it occupies 100% width of the parent div and becomes center aligned due to "text-align: center".

Output:

👁 Image