How to use Bootstrap Modal In HTML
- We will use a Bootstrap modal to show an image while clicking on the button.
- We need to integrate the bootstrap CDN with the HTML code to use it.
- We can add bootstrap CDN to our HTML file as added in the below example code.
Example: In this example, we will see the use of the Bootstrap model.
<!DOCTYPE html>
<html>
<body>
<h2>w3wiki</h2>
<p><b>Click on the button to see image</b></p>
<!-- Button to launch a modal -->
<button type="button"
class="btn btn-primary"
data-toggle="modal"
data-target="#exampleModal">
Show image
</button>
<!-- Modal -->
<div class="modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Add image inside the body of modal -->
<div class="modal-body">
<img id="image"
src=
"https://media.w3wiki.org/wp-content/uploads/20210915115837/gfg3.png"
alt="Click on button" />
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-secondary"
data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<!-- Adding scripts to use bootstrap -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
</body>
</html>
Output:
How to Show Images on Click using HTML ?
We’ll learn how to display images when someone clicks on them using HTML. We’ll also use a bit of JavaScript to make our web pages more dynamic. We’ll go through a few easy ways to do this, so you can choose the one that works best for you. Let’s get started!
Table of Content
- Changing display properties of attribute using JavaScript:
- Using tag with empty src attribute
- Using Bootstrap Modal
- Using JavaScript to Append Image to DOM