Modal sizes
Modal size classes make dialogs small, large or extra large, or full screen.
In this page:
Syntax
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
<div class="modal-dialog modal-fullscreen">...</div>Modal sizes
Add .modal-sm, .modal-lg or .modal-xl to the .modal-dialog, or use .modal-fullscreen (and breakpoint versions like .modal-fullscreen-md-down). Center vertically with .modal-dialog-centered. The default width adapts to the screen size.
Note:
modal-dialog-centered vertically centres the dialog.
Example: Modal sizes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3">
<div class="container">
<button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#big">Large centred modal</button>
<div class="modal fade" id="big" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content"><div class="modal-body">This is a <b>large</b>, vertically centred modal.</div></div>
</div>
</div>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Putting size classes on modal-content
- Forgetting vertical centering option
- Using fixed widths
Chapter Summary
- modal-sm, lg, xl on the dialog
- modal-fullscreen for full screen
- modal-dialog-centered centres
- Sizes go on modal-dialog
🔒
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: