Bootstrap 5 Modal Optional Sizes
Last Updated :
27 Dec, 2022
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.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
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:
Bootstrap 5 Modal Optional sizes
Example 2: In this example, we will learn about Large modals.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
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:
Bootstrap 5 Modal Optional sizes
References: https://getbootstrap.com/docs/5.0/components/modal/#optional-sizes
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...