How to display image in bootstrap modal?

May 24, 2022

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, we walk through the complete process of creating a display image in bootstrap modal . 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.

Table of contents

Includes bootstrap library
Included JS bootstrap
Define its class name

This article will guide you to adding show and hide password in Bootstrap with example.

Step 1: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

	<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
		integrity=
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
		crossorigin="anonymous">

Step 2: Included JS bootstrap

Now, load the Bootstrap JavaScript file before closing the body tag and done.

 	<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
		crossorigin="anonymous">
	</script>
	<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
		integrity=
"sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
		crossorigin="anonymous">
	</script>
	<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
		integrity=
"sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
		crossorigin="anonymous">
	</script>

Step 3: Include the code in body

Include the code below in <body> to accept time from the user.

	<button type="button" class="btn btn-primary"
		data-toggle="modal" data-target="#exampleModal">
		Click to view modal
	</button>
	<!--Bootstrap 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">
				<!-- Modal heading -->
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">
						aGuideHub
					</h5>
					<button type="button" class="close"
						data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">
							×
						</span>
					</button>
				</div>
				<!-- Modal body with image -->
				<div class="modal-body">
					<img src="image/nature.jpg" />
				</div>
			</div>
		</div>
	</div>

Example.

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
		integrity=
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
		crossorigin="anonymous">
</head>
<body>
	<button type="button" class="btn btn-primary"
		data-toggle="modal" data-target="#exampleModal">
		Click to view modal
	</button>
	<!--Bootstrap 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">
				<!-- Modal heading -->
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">
						aGuideHub
					</h5>
					<button type="button" class="close"
						data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">
							×
						</span>
					</button>
				</div>
				<!-- Modal body with image -->
				<div class="modal-body">
					<img src="image/nature.jpg" />
				</div>
			</div>
		</div>
	</div>
	<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
		crossorigin="anonymous">
	</script>
	<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
		integrity=
"sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
		crossorigin="anonymous">
	</script>
	<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
		integrity=
"sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
		crossorigin="anonymous">
	</script>
</body>
</html>

Check the output of the above code example.

All the best 👍

How to display image in bootstrap modal?

Step 1: Includes bootstrap library

Step 2: Included JS bootstrap

Step 3: Include the code in body

Example.

Premium Content

Books

Interview Questions

Portfolio Template

Cheat Sheets

Related Posts