Bootstrap 5 Modal Optional sizes have different optional sizes, to be placed along with the modal-dialog class. This is used to create different sizes modals.
Bootstrap 5 Modal Optional sizes Classes:
- modal-sm: This class is used for creating a small modal having a width of 300px.
- modal-lg: This class is used for creating a large modal having a width of 800px
- modal-xl: This class is used for creating extra-large modals having a width of 1140px.
Note: If no styles are specified, it will be treated as a default modal with a width of 500px.
Syntax:
<div class="modal-dialog modal-xl">
...
</div>
Example 1: In this example, we will learn about small modals.
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN-->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body class="m-2">
<div>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Modal Optional Sizes</h2>
<button type="button" class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#staticBackdrop">
Launch Small modal
</button>
<div class="modal fade" id="staticBackdrop"
data-bs-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="staticBackdropLabel">
Small Modal
</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal"
aria-label="Close">
</button>
</div>
<div class="modal-body">
<p>I am a Small Modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Understood
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: In this example, we will learn about Large modals.
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN-->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body class="m-2">
<div>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Modal Optional Sizes</h2>
<button type="button" class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#staticBackdrop">
Launch Large modal
</button>
<div class="modal fade" id="staticBackdrop"
data-bs-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="staticBackdropLabel">
Large Modal
</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close">
</button>
</div>
<div class="modal-body">
<p>I am a Large Modal</p>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-secondary"
data-bs-dismiss="modal">
Close
</button>
<button type="button"
class="btn btn-primary">
Understood
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
References: https://getbootstrap.com/docs/5.0/components/modal/#optional-sizes