Bootstrap4 Modal

Modal is basically a dialog or popup window used to provide important information to the user or prompt the user to take necessary actions before proceeding. Modes are widely used to warn users of session timeouts or to receive their final confirmation before performing any critical operation (such as saving or deleting important data).

You can easily create very smart and flexible dialog boxes using the Bootstrap modal plugin.

Modal box (Modal) is a child window that overlays the parent window. Usually, the purpose is to display content from a separate source, which can have some interaction without leaving the parent window. The child window can provide information interaction, etc.

How to create a modal box

The following example outlines the basic structure of a simple mode with a title, message body, and footer containing user operation buttons. The following example creates a simple modal box effect :

Example

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　example</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Modal box example</h2>
　　!--　Button: Used to open the modal box　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　Open modal box
　　</button>
　　　
　　!--　Modal　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog">
　　　　　　<div　class="modal-content">
　　　
　　　　　　　　!--　Modal Header　-->
　　　　　　　　<div　class="modal-header">
　　　　　　　　　　<h4　class="modal-title">Modal Header</h4>
　　　　　　　　　　<button　type="button"　class="close"　data-dismiss="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　!--　Modal Body　-->
　　　　　　　　<div　class="modal-body>
　　　　　　　　　　Modal Content...
　　　　　　　　</div>
　　　
　　　　　　　　!--　Modal Footer　-->
　　　　　　　　<div　class="modal-footer">
　　　　　　　　　　<button　type="button"　class="btn　btn-secondary"　data-dismiss="modal">Close</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>

Test and see ‹/›

The effect after running is as follows:

Modal box size

We can add the .modal-sm class to create a small modal box, .modal-lg class can create a large modal box.

Size classes are placed in the .modal of the <div> element-After adding the dialog class :

Example - Small modal box

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　example</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Modal box example</h2>
　　!--　Button: Used to open the modal box　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　Open modal box
　　</button>
　　　
　　!--　Modal　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog　modal-sm">
　　　　　　<div　class="modal-content">
　　　
　　　　　　　　!--　Modal Header　-->
　　　　　　　　<div　class="modal-header">
　　　　　　　　　　<h4　class="modal-title">Modal Header</h4>
　　　　　　　　　　<button　type="button"　class="close"　data-dismiss="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　!--　Modal Body　-->
　　　　　　　　<div　class="modal-body>
　　　　　　　　　　Modal Content...
　　　　　　　　</div>
　　　
　　　　　　　　!--　Modal Footer　-->
　　　　　　　　<div　class="modal-footer">
　　　　　　　　　　<button　type="button"　class="btn　btn-secondary"　data-dismiss="modal">Close</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>

Test and see ‹/›

The effect after running is as follows:

Example - Large modal box

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　example</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Modal box example</h2>
　　!--　Button: Used to open the modal box　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　Open modal box
　　</button>
　　　
　　!--　Modal　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog　modal-lg">
　　　　　　<div　class="modal-content">
　　　
　　　　　　　　!--　Modal Header　-->
　　　　　　　　<div　class="modal-header">
　　　　　　　　　　<h4　class="modal-title">Modal Header</h4>
　　　　　　　　　　<button　type="button"　class="close"　data-dismiss="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　!--　Modal Body　-->
　　　　　　　　<div　class="modal-body>
　　　　　　　　　　Modal Content...
　　　　　　　　</div>
　　　
　　　　　　　　!--　Modal Footer　-->
　　　　　　　　<div　class="modal-footer">
　　　　　　　　　　<button　type="button"　class="btn　btn-secondary"　data-dismiss="modal">Close</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>

Test and see ‹/›

The effect after running is as follows:

Bootstrap4 Toasts Bootstrap4 Carousel

Bootstrap4 Basic Tutorial

Bootstrap4 Modal

How to create a modal box

Modal box size