Bootstrap 5 Modal Optional Sizes

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.

Output:

Example 2: In this example, we will learn about Large modals.

Output:

References: https://getbootstrap.com/docs/5.0/components/modal/#optional-sizes