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 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”.
- How to pass data into a bootstrap modal?
- How to open popup using Angular and Bootstrap ?
- How to configure modal width in Bootstrap?
- Bootstrap 4 | Modal
- How to get the same behavior with confirm and bootstrap modal?
- How to use Bootstrap modal for YouTube videos and play automatically ?
- What does .modal('dispose') do in Bootstrap 4 ?
- How to use modal closing event in Twitter Bootstrap ?
- How to handle the modal closing event in Twitter Bootstrap?
- How to open or close react-bootstrap modal pro-grammatically?
- How to change the position of modal close button in bootstrap?
- Bootstrap 5 Modal
- How to auto-resize an image to fit a div container using CSS?
- Include Bootstrap in AngularJS using ng-bootstrap
- Convert an image into grayscale image using HTML/CSS
- How to center a popup window on screen?
- Semantic-UI | Popup
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.