Bootstrap - Modals

This chapter discusses about the Bootstrap's component modals. Modals are a type of component that are used to display content or messages in a customizable dialog box that overlays the current page.

Modals can be used for a variety of purposes such as displaying images, videos, forms, and notifications.
Modals are useful for creating a user-friendly and interactive interface because they allow users to interact with content without leaving the current page.
They can also be easily customized using Bootstrap's built-in classes and JavaScript plugins.
Modal gets closed automatically when the modal backdrop is clicked.
Only one modal window at a time is supported by Bootstrap.
It is advised to avoid nesting a .modal within another element. Rather place your modal in a top-level position to avoid any interference from other elements.
Using modals on mobile devices comes with certain limitations because of position: fixed.
Animation effect of the modal component depends upon the prefers-reduced-motion media query.
The autofocus HTML attribute is ineffective in Bootstrap modals because of the way HTML5 defines its semantics. A comparable result can be attained by employing specially crafted JavaScript code.

    const myModal = document.getElementById('myModal')
    const myInput = document.getElementById('myInput')
       
    myModal.addEventListener('shown.bs.modal', () => {
    myInput.focus()
    })

Modal components

The components of a modal in Bootstrap are as follows:

Modal header - Contains the title and a close button.
Modal body - Contains the content of the modal.
Modal footer - Contains buttons or other actions that may be available to the user.
Modal backdrop - A semi-transparent overlay that covers the background when the modal is active.
Modal content - The container that houses the header, body, and footer components.
Modal dialog - The outermost container that defines the size of the modal and the location of the content within it.

Let us see an example of a basic modal:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Modal</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="text-align: center;">
	<div class="container mt-3" style="width: 700px;">
		<h4>Static Modal</h4>
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch modal</button>
		<!-- Modal -->
		<div class="modal" id="exampleModal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h3 class="modal-title">Modal title</h3>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body"><strong><h4>Example of a Static Modal</h4></strong></div>
					<div class="modal-footer">
						<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
						<button type="button" class="btn btn-success">Save</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Static backdrop

The modal will not close on clicking out of it, when the backdrop is static.

Let us see an example for a static backdrop:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Modal</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="text-align: center;">
	<div class="container mt-3" style="width: 700px;">
		<h4>Modal with static backdrop</h4>
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
			Launch modal
		  </button>
		<!-- Modal -->
		<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header bg-warning-subtle">
						<h3 class="modal-title" fs-5" id="exampleModalLabel">Modal title</h3>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body bg-success-subtle border border-dark"><strong><h4>This is a modal with static backdrop. Try clicking outside to close me!!! Sorry you can't, as this has a static backdrop.</h4></strong></div>
					<div class="modal-footer bg-warning-subtle">
						<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
						<button type="button" class="btn btn-success">Save</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Scrollable modal

Bootstrap provides feature to make a modal scrollable, independent of the page itself, in situations when the modal becomes too long for the viewport or device.

Let us see an example for a scrollable modal:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Modal</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="text-align: center;">
	<div class="container mt-3" style="width: 700px;">
		<h4>Modal with scrolling long content</h4>
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
			Launch modal
		  </button>
		<!-- Modal -->
		<div class="modal fade" id="exampleModal">
			<div class="modal-dialog modal-lg modal-dialog-scrollable" style="height: 300px">
				<div class="modal-content">
					<div class="modal-header bg-warning-subtle">
						<h3 class="modal-title" fs-5" id="exampleModalLabel">Modal title</h3>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body bg-success-subtle border border-dark"><h4>This is an example for a scrollable modal. A scroll bar is seen as the content is too long to be viewed in the modal. Hence the class ".modal-dialog-scrollable" is provided by Bootstrap. Let us use this class and see the change in the appearance of the modal. Still scroll bar doesn't appear. make the content long enough for the scroll to appear.....................................................................................</h4></div>
					<div class="modal-footer bg-warning-subtle">
						<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
						<button type="button" class="btn btn-success">Save</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Vertically centered

In order to vertically center the modal, use the class .modal-dialog-centered to .modal-dialog.

Let us see an example for a vertically centered modal:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Modal</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="text-align: center;">
	<div class="container mt-3" style="width: 700px;">
		<h4>Vertically centered modal</h4>
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
			Launch vertically centered modal
		  </button>
		<!-- Modal -->
		<div class="modal fade" id="exampleModal">
			<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" style="width: 450px" style="height: 150px">
				<div class="modal-content">
					<div class="modal-header bg-warning-subtle">
						<h3 class="modal-title" fs-5" id="exampleModalLabel">Vertically centered modal</h3>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body bg-success-subtle border border-dark"><h4>This is an example for a vertically centered scrollable modal. A scroll bar is seen as the content is too long to be viewed in the modal. Hence the class ".modal-dialog-centered" with ".modal-dialog-scrollable" is provided by Bootstrap. Let us use this class and see the change in the appearance of the modal. Still scroll bar doesn't appear. make the content long enough for the scroll to appear....scrolllllllllllllllllaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaableeeeeeeeeeeeeee...................................</h4></div>
					<div class="modal-footer bg-warning-subtle">
						<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
						<button type="button" class="btn btn-success">Save</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Tooltips and popovers

Modals can include tooltips and popovers. Tooltips and popovers within a modal, automatically gets dismissed, when the container modal gets closed.

Let us see an example for a modal with tooltip:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Modal</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="mt-5">
            <h4 class="text-success">Tooltips in modal</h4>
		</div>
        <div class="modal fade" id="gfg" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Modal With Tooltip</h4>
                    </div>
                    <div class="modal-body">
                       This is a modal containing a tooltip. To see the tooltip hover over the button shown below.
                        <button 
                        type="button" id="tooltip1" class="btn btn-secondary mt-4" data-bs-toggle="tooltip" title="I am a tooltip shown on hovering">
                        Hover over me
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <button class="btn btn-success mt-4" onclick="showModal()">Show Modal</button>
    </div>
    <script>
        //Enabling the tooltip
        bootstrap.Tooltip.getOrCreateInstance("#tooltip1")
        // Function to Show Modal
        function showModal() {
            bootstrap.Modal.getOrCreateInstance('#gfg').show();
        }
    </script>
</body>
</html>

Let us see an example for a modal with popover:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Modal</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="mt-5">
            <h4 class="text-success">Popover in modal</h4>
		</div>
        <div class="modal fade" id="gfg" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Modal With Popover</h4>
                    </div>
                    <div class="modal-body">
                       This is a modal containing a popover. To see the popover click the button shown below.
                        <button 
                        type="button" id="popover1" class="btn btn-secondary mt-4" data-bs-toggle="popover" title="I am a popover shown on clicking">
                        Click me!!!
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <button class="btn btn-success mt-4" onclick="showModal()">Show Modal</button>
    </div>
    <script>
        //Enabling the popover
        bootstrap.Popover.getOrCreateInstance("#popover1")
        // Function to Show Modal
        function showModal() {
            bootstrap.Modal.getOrCreateInstance('#gfg').show();
        }
    </script>
</body>
</html>

Using the grid

Bootstrap grid system can be utilized within a .modal-body by nesting a .container-fluid and then use the grid system classes as required.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Modal</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="mt-5">
            <h4 class="text-center text-success">Grid in modal</h4>
		</div>
        <div class="modal fade" id="gfg" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-secondary-subtle">
                        <h4 class="modal-title">Modal With Grid</h4>
                    </div>
                    <div class="modal-body">
						<div class="modal-body bg-primary-subtle">
							<div class="container-fluid">
							  <div class="row border border-dark">
								<div class="col-md-4 border border-dark">col 1</div>
								<div class="col-md-4 ms-auto border border-dark">col 2</div>
							  </div>
							  <div class="row border border-dark">
								<div class="col-md-3 ms-auto border border-dark">col 3</div>
								<div class="col-md-2 ms-auto border border-dark">col 4</div>
							  </div>
							  <div class="row border border-dark">
								<div class="col-md-6 ms-auto border border-dark">col 5</div>
							  </div>
							  <div class="row border border-dark">
								<div class="col-sm-9 border border-dark">
								  Level 1: data
								  <div class="row border border-dark">
									<div class="col-8 col-sm-6 border border-dark">
									  Level 2: data
									</div>
									<div class="col-4 col-sm-6 border border-dark">
									  Level 2: data 
									</div>
								  </div>
								</div>
							  </div>
							</div>
						  </div>
                    </div>
                </div>
            </div>
        </div>
		<center>
        <button class="btn btn-success mt-4" onclick="showModal()">Show Modal</button>
		</center>
    </div>
    <script>
        // Function to Show Modal
        function showModal() {
            bootstrap.Modal.getOrCreateInstance('#gfg').show();
        }
    </script>
</body>
</html>

Varying modal content

If you have a collection of buttons that activate an identical modal with slightly distinct content, you can leverage event.relatedTarget and HTML data-bs-* attributes to modify the content of the modal based on the specific button that was clicked.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Modal</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="my-4">
            <h4 class="text-success">Varying modal content</h4>
        </div>
        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#mymodal" data-bs-heading="About modal">
            Open Modal
        </button>
        <a class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#mymodal" data-bs-heading="Title changed">
            Open Modal Changed Title
        </a>
        <div class="modal fade" id="mymodal" data-bs-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-primary-subtle">Title 1</div>
                    <div class="modal-body text-bg-warning">
                        <p>
                            Modal is a feature provided by Bootstrap that can include tooltips, popovers, grid and much more.
                        </p>
                    </div>
                    <div class="modal-footer bg-primary-subtle">
                        <button type="button" class="btn btn-success" data-bs-dismiss="modal">Close</button>
                    </div> 
                </div>
            </div>
        </div>
    </div>
    <script>
        const myModal = document.querySelector('#mymodal');
        myModal.addEventListener('show.bs.modal', function (event) {
            // Get the reference of the triggering button
            // and retrieve the value from the attribute
            const button = event.relatedTarget;
            const heading = button.getAttribute('data-bs-heading');
             // Set the value for the heading
            const title = myModal.querySelector('.modal-header').textContent = heading;
        });
    </script>
</body>
</html>

Toggle between modals

With the help of placement of data-bs-target and data-bs-toggle attributes, you can toggle between multiple modals with ease.

Multiple modals can not be opened at the same time, you can simply toggle between two different modals.

Let us see an example for toggling between modals:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Modal</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<body class="m-4">
		<h4>Toggle between modals</h4>
		<div class="modal fade" id="modal1">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="modalLabel">Modal 1</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						<p>This is a simple modal. Clicking on the "Go to modal 2" button, you can toggle to the second modal.</p>
					</div>
					<div class="modal-footer">
						<button class="btn btn-danger" data-bs-dismiss="modal">Close</button>
						<button class="btn btn-success" data-bs-target="#modal2" data-bs-toggle="modal" data-bs-dismiss="modal">
							Go to modal 2
						</button>
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade" id="modal2">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="modal2">Modal 2</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						<p>This is the second modal appeared after the 'Go to modal 2' button was clicked from first modal. Click on 'Back' button to go back to modal 1.</p>
					</div>
					<div class="modal-footer">
						<button class="btn btn-success" data-bs-target="#modal1" data-bs-toggle="modal" data-bs-dismiss="modal">Back</button>
					</div>
				</div>
			</div>
		</div>
		<a class="btn btn-success m-4" data-bs-toggle="modal" href="#modal1" role="button">Launch modal 1</a>
</body>
</html>

Change animation

In order to add animation to your modal, use the class .fade to .modal, which will add a fading effect when opening and closing the modal.

And in case you want to remove the animation, just remove the .fade class from the .modal class.

Let us see an example for modal with animation:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Modal</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="text-align: center;">
	<div class="container mt-3" style="width: 700px;">
		<h4>Modal with animation</h4>
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary"
			data-bs-toggle="modal" data-bs-target="#exampleModal">
			Launch animated modal
		</button>
		<!-- Modal -->
		<div class="modal fade" id="exampleModal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header bg-danger-subtle border border-danger">
						<h3 class="modal-title">Animated Modal</h3>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Modal with animation</h4></strong></div>
					<div class="modal-footer bg-danger-subtle">
						<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
						<button type="button" class="btn btn-success">Save</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Let us see an example for modal with no animation:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Modal</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="text-align: center;">
	<div class="container mt-3" style="width: 700px;">
		<h4>Modal with no animation</h4>
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary"
			data-bs-toggle="modal" data-bs-target="#exampleModal">
			Launch non-animated modal
		</button>
		<!-- Modal -->
		<div class="modal" id="exampleModal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header bg-danger-subtle border border-danger">
						<h3 class="modal-title">Non-animated Modal</h3>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Modal with no animation</h4></strong></div>
					<div class="modal-footer bg-danger-subtle">
						<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
						<button type="button" class="btn btn-success">Save</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Dynamic heights

You should call the function myModal.handleUpdate() to adjust the modal's position, if the height of the modal changes dynamically.

Accessibility

Ensure that you include aria-labelledby="..." that pertains to the modal title for .modal. Also, to describe your modal dialog, you can use aria-describedby on .modal. It is not required to add role="dialog" as it is already implemented through JavaScript.

Optional sizes

By adding modifier classes to a .modal-dialog, one can access the three optional sizes of modals. These sizes are triggered at specific breakpoints to prevent the appearance of horizontal scrollbars on smaller viewports.

Size	Class	Max-width
Small	.modal-sm	300px
Default	None	500px
Large	.modal-lg	800px
Extra large	.modal-xl	1140px

Default modal without a modifier class, represents the medium size modal.

Note: In order to see the changed effect of the different modal sizes, kindly change the size of your browser.

Let us see an examples of differently sized modals, such as xl, lg and sm:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Modal</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<center>
	<h3><u>Modals of varying sizes</u></h3>
	</center>

	<!--Extra large Modal-->	
	<div class="container text-center pb-2">
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary"
			data-bs-toggle="modal" data-bs-target="#exampleModalXl">
			Launch xl modal
		</button>
		<!-- Modal -->
		<div class="modal" id="exampleModalXl">
			<div class="modal-dialog modal-xl">
				<div class="modal-content">
					<div class="modal-header bg-danger-subtle border border-danger">
						<h3 class="modal-title">Extra Large Modal</h3>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Modal of extra large size</h4></strong></div>
					<div class="modal-footer bg-danger-subtle">
						<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
						<button type="button" class="btn btn-success">Save</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--Large Modal-->
	<div class="container text-center pb-2">
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary"
			data-bs-toggle="modal" data-bs-target="#exampleModal">
			Launch lg modal
		</button>
		<!-- Modal -->
		<div class="modal" id="exampleModal">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<div class="modal-header bg-danger-subtle border border-danger">
						<h3 class="modal-title">Large Modal</h3>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Modal of Large size</h4></strong></div>
					<div class="modal-footer bg-danger-subtle">
						<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
						<button type="button" class="btn btn-success">Save</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--Small Modal-->
	<div class="container text-center">
		<!-- Button trigger modal -->
			<button type="button" class="btn btn-primary"
				data-bs-toggle="modal" data-bs-target="#exampleModalSm">
				Launch sm modal
			</button>
			<!-- Modal -->
			<div class="modal" id="exampleModalSm">
				<div class="modal-dialog modal-lg">
					<div class="modal-content">
						<div class="modal-header bg-danger-subtle border border-danger">
							<h3 class="modal-title">Small Modal</h3>
							<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						</div>
						<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Modal of small size</h4></strong></div>
						<div class="modal-footer bg-danger-subtle">
							<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
							<button type="button" class="btn btn-success">Save</button>
						</div>
					</div>
				</div>
			</div>
		</div>
</div>
</body>
</html>

Fullscreen modal

A modal that can cover the user's viewport is made possible through modifier classes applied to a .modal-dialog, offering another override option.

Class	Availability
.modal-fullscreen	Always
.modal-fullscreen-sm-down	576px
.modal-fullscreen-md-down	768px
.modal-fullscreen-lg-down	992px
.modal-fullscreen-xl-down	1200px
.modal-fullscreen-xxl-down	1400px

Let us see an example showing all the sizes of modals covering the fullscreen.

Note: In order to see the changed effect for each kind of modal, kindly resize your browser.

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap - Modal</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="text-align: center;">
	<h3><u>Modals as per the viewport size</u></h3>
	<div class="d-flex flex-row mt-auto">
	<div class="container mt-5">
		<h5>Fullscreen Modal</h5>
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary"
			data-bs-toggle="modal" data-bs-target="#exampleModal">
			Launch fullscreen modal
		</button>
		<!-- Modal -->
		<div class="modal" id="exampleModal">
			<div class="modal-dialog modal-fullscreen">
				<div class="modal-content">
					<div class="modal-header bg-danger-subtle border border-danger">
						<h3 class="modal-title">Fullscreen Modal</h3>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Fullscreen modal capturing the whole screen</h4></strong></div>
					<div class="modal-footer bg-danger-subtle">
						<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
						<button type="button" class="btn btn-success">Save</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--xxl modal-->
	<div class="container mt-3">
		<h5>Fullscreen xxl Modal</h5>
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary"
			data-bs-toggle="modal" data-bs-target="#exampleModalXxl">
			Launch fullscreen xxl modal
		</button>
		<!-- Modal -->
		<div class="modal" id="exampleModalXxl">
			<div class="modal-dialog modal-fullscreen-xxl-down">
				<div class="modal-content">
					<div class="modal-header bg-danger-subtle border border-danger">
						<h3 class="modal-title">Fullscreen xxl Modal</h3>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Fullscreen xxl modal</h4></strong></div>
					<div class="modal-footer bg-danger-subtle">
						<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
						<button type="button" class="btn btn-success">Save</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--xl modal-->
	<div class="container mt-3">
		<h5>Fullscreen xl Modal</h5>
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary"
			data-bs-toggle="modal" data-bs-target="#exampleModalXl">
			Launch fullscreen xl modal
		</button>
		<!-- Modal -->
		<div class="modal" id="exampleModalXl">
			<div class="modal-dialog modal-fullscreen-xl-down">
				<div class="modal-content">
					<div class="modal-header bg-danger-subtle border border-danger">
						<h3 class="modal-title">Fullscreen xl Modal</h3>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Fullscreen xl modal</h4></strong></div>
					<div class="modal-footer bg-danger-subtle">
						<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
						<button type="button" class="btn btn-success">Save</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--lg modal-->
	<div class="container mt-3">
		<h5>Fullscreen lg Modal</h5>
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary"
			data-bs-toggle="modal" data-bs-target="#exampleModalLg">
			Launch fullscreen lg modal
		</button>
		<!-- Modal -->
		<div class="modal" id="exampleModalLg">
			<div class="modal-dialog modal-fullscreen-lg-down">
				<div class="modal-content">
					<div class="modal-header bg-danger-subtle border border-danger">
						<h3 class="modal-title">Fullscreen lg Modal</h3>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Fullscreen large modal</h4></strong></div>
					<div class="modal-footer bg-danger-subtle">
						<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
						<button type="button" class="btn btn-success">Save</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--md modal-->
	<div class="container mt-3">
		<h5>Fullscreen md Modal</h5>
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary"
			data-bs-toggle="modal" data-bs-target="#exampleModalMd">
			Launch fullscreen md modal
		</button>
		<!-- Modal -->
		<div class="modal" id="exampleModalMd">
			<div class="modal-dialog modal-fullscreen-md-down">
				<div class="modal-content">
					<div class="modal-header bg-danger-subtle border border-danger">
						<h3 class="modal-title">Fullscreen Medium Modal</h3>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Fullscreen medium modal</h4></strong></div>
					<div class="modal-footer bg-danger-subtle">
						<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
						<button type="button" class="btn btn-success">Save</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--sm modal-->
	<div class="container mt-3">
		<h5>Fullscreen sm Modal</h5>
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary"
			data-bs-toggle="modal" data-bs-target="#exampleModalSm">
			Launch fullscreen sm modal
		</button>
		<!-- Modal -->
		<div class="modal" id="exampleModalSm">
			<div class="modal-dialog modal-fullscreen-sm-down">
				<div class="modal-content">
					<div class="modal-header bg-danger-subtle border border-danger">
						<h3 class="modal-title">Fullscreen Small Modal</h3>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Fullscreen small modal</h4></strong></div>
					<div class="modal-footer bg-danger-subtle">
						<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
						<button type="button" class="btn btn-success">Save</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>