Menu
Bootstrap 5 Modal
Modals
The Modal component is a dialog box/popup window that is displayed on top of the current page:
How To Create a Modal
The following example shows how to create a basic modal:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h3>Modal Example</h3>
<p>Click on the button to open the modal.</p>
<button type=”button” data-bs-toggle=”modal” data-bs-target=”#myModal”>
Open modal
</button>
</div>
<!– The Modal –>
<div id=”myModal”>
<div>
<div>
<!– Modal Header –>
<div>
<h4>Modal Heading</h4>
<button type=”button” data-bs-dismiss=”modal”></button>
</div>
<!– Modal body –>
<div>
Modal body..
</div>
<!– Modal footer –>
<div>
<button type=”button” data-bs-dismiss=”modal”>Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Add animation
Use the .fade class to add a fading effect when opening and closing the modal:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h3>Fading Modal Example</h3>
<p>Click on the button to open the modal.</p>
<button type=”button” data-bs-toggle=”modal” data-bs-target=”#myModal”>
Open modal
</button>
</div>
<!– The Modal –>
<div id=”myModal”>
<div>
<div>
<!– Modal Header –>
<div>
<h4>Modal Heading</h4>
<button type=”button” data-bs-dismiss=”modal”></button>
</div>
<!– Modal body –>
<div>
Modal body..
</div>
<!– Modal footer –>
<div>
<button type=”button” data-bs-dismiss=”modal”>Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Modal Size
Change the size of the modal by adding the .modal-sm class for small modals (max-width 300px), .modal-lg class for large modals (max-width 800px), or .modal-xl for extra large modals (max-width 1140px). Default is 500px max-width.
Add the size class to the <div> element with class .modal-dialog:
Small Modal
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h3>Small Modal Example</h3>
<p>Click on the button to open the modal.</p>
<button type=”button” data-bs-toggle=”modal” data-bs-target=”#myModal”>
Open modal
</button>
</div>
<!– The Modal –>
<div id=”myModal”>
<div>
<div>
<!– Modal Header –>
<div>
<h4>Modal Heading</h4>
<button type=”button” data-bs-dismiss=”modal”></button>
</div>
<!– Modal body –>
<div>
Modal body..
</div>
<!– Modal footer –>
<div>
<button type=”button” data-bs-dismiss=”modal”>Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Large Modal
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h3>Large Modal Example</h3>
<p>Click on the button to open the modal.</p>
<button type=”button” data-bs-toggle=”modal” data-bs-target=”#myModal”>
Open modal
</button>
</div>
<!– The Modal –>
<div id=”myModal”>
<div>
<div>
<!– Modal Header –>
<div>
<h4>Modal Heading</h4>
<button type=”button” data-bs-dismiss=”modal”></button>
</div>
<!– Modal body –>
<div>
Modal body..
</div>
<!– Modal footer –>
<div>
<button type=”button” data-bs-dismiss=”modal”>Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Extra Large
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h3>Extra Large Modal Example</h3>
<p>Click on the button to open the modal.</p>
<button type=”button” data-bs-toggle=”modal” data-bs-target=”#myModal”>
Open modal
</button>
</div>
<!– The Modal –>
<div id=”myModal”>
<div>
<div>
<!– Modal Header –>
<div>
<h4>Modal Heading</h4>
<button type=”button” data-bs-dismiss=”modal”></button>
</div>
<!– Modal body –>
<div>
Modal body..
</div>
<!– Modal footer –>
<div>
<button type=”button” data-bs-dismiss=”modal”>Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Fullscreen Modals
If you want the modal to span the whole width and height of the page, use the .modal-fullscreen class:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h3>Fullscreen Modal Example</h3>
<p>Click on the button to open the fullscreen modal.</p>
<button type=”button” data-bs-toggle=”modal” data-bs-target=”#myModal”>
Open modal
</button>
</div>
<!– The Modal –>
<div id=”myModal”>
<div>
<div>
<!– Modal Header –>
<div>
<h4>Modal Heading</h4>
<button type=”button” data-bs-dismiss=”modal”></button>
</div>
<!– Modal body –>
<div>
Modal body..
</div>
<!– Modal footer –>
<div>
<button type=”button” data-bs-dismiss=”modal”>Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Responsive Fullscreen Modals
You can also control when the modal should be in fullscreen, with the .modal-fullscreen-*-* classes:
| Class | Description | Example |
|---|---|---|
.modal-fullscreen-sm-down |
Fullscreen below 576px | Try it |
.modal-fullscreen-md-down |
Fullscreen below 768px | Try it |
.modal-fullscreen-lg-down |
Fullscreen below 992px | Try it |
.modal-fullscreen-xl-down |
Fullscreen below 1200px | Try it |
.modal-fullscreen-xxl-down |
Fullscreen below 1400px | Try it |
Centered Modal
Center the modal vertically and horizontally within the page, with the .modal-dialog-centered class:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h3>Vertically Centered Modal Example</h3>
<p>Click on the button to open the modal.</p>
<button type=”button” data-bs-toggle=”modal” data-bs-target=”#myModal”>
Open modal
</button>
</div>
<!– The Modal –>
<div id=”myModal”>
<div>
<div>
<!– Modal Header –>
<div>
<h4>Modal Heading</h4>
<button type=”button” data-bs-dismiss=”modal”></button>
</div>
<!– Modal body –>
<div>
Modal body..
</div>
<!– Modal footer –>
<div>
<button type=”button” data-bs-dismiss=”modal”>Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Scrolling Modal
When you have a lot of content inside the modal, a scrollbar is added to the page. See the examples below to understand it:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Modal Scroll Example</h2>
<p>Click on the button to open the modal.</p>
<button type=”button” data-bs-toggle=”modal” data-bs-target=”#myModal”>
Open modal
</button>
</div>
<!– The Modal –>
<div id=”myModal”>
<div>
<div>
<!– Modal Header –>
<div>
<h4>Modal Heading</h4>
<button type=”button” data-bs-dismiss=”modal”></button>
</div>
<!– Modal body –>
<div>
<h3>Some text to enable scrolling..</h3>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!– Modal footer –>
<div>
<button type=”button” data-bs-dismiss=”modal”>Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
However, it is possible to only scroll inside the modal, instead of the page itself, by adding .modal-dialog-scrollable to .modal-dialog:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Modal Scroll Example</h2>
<p>Click on the button to open the modal.</p>
<button type=”button” data-bs-toggle=”modal” data-bs-target=”#myModal”>
Open modal
</button>
</div>
<!– The Modal –>
<div id=”myModal”>
<div>
<div>
<!– Modal Header –>
<div>
<h4>Modal Heading</h4>
<button type=”button” data-bs-dismiss=”modal”></button>
</div>
<!– Modal body –>
<div>
<h3>Some text to enable scrolling..</h3>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!– Modal footer –>
<div>
<button type=”button” data-bs-dismiss=”modal”>Close</button>
</div>
</div>
</div>
</div>
</body>
</html>