Javatpoint Logo
Javatpoint Logo

Bootstrap 5 modal function

Bootstrap 5 uses a modal function in web applications to design the UI of the web application with information. The modal function displays a popup box using the button function. The website can have dialogues added for light boxes, user notifications, or unique content by using modules. Modal development uses Bootstrap 5 classes, CSS, and HTML. We take up more space in the document than anything else and disable scrolling in the body.

Basic modal function

The basic modal function creates a single box with the web application's information. The modal function shows a popup box with unique user interactive data if we click the button. The close button helps to disclose the modal function.

Syntax

The following syntax shows a basic modal function using a button element.

Example

The following example shows a basic modal function using Bootstrap 5 classes and html element. We can use a simple popup box to display information.

Output

The following output shows a basic modal function with information.

Bootstrap 5 Modal Function

Modal with header and footer

The bootstrap 5 modal uses header, text, and footer data using the "modal-header", "modal-body", and the "modal-footer" classes. This data includes in the "modal-content" class. We can use the close button function using the button's data-bs-dismiss = "modal" element.

Syntax

The following syntax shows a basic modal function with a header, footer, and text.

The following syntax shows a closing button with a modal function.

Example

The following example shows a modal function with a header, footer, and text using Bootstrap 5 classes and html element. We use the close button to dismiss the modal function.

Output

The following output shows a basic modal function with information.

Bootstrap 5 Modal Function

Animated modal function

The animated modal function uses the "fade" class. This class provides an animated effect with given information. The "fade" class is not necessary for the modal function. We can remove it from html element.

Syntax

The following syntax shows the animated modal function.

Example

The following example shows an animated modal function using Bootstrap 5 classes and html element.

Output

The following output shows an animated modal function with information.

Bootstrap 5 Modal Function

Modal function with the size

The modal can display different sizes for different screen widths using size classes. The "modal-sm" class provides maximum size 300px width for small size. The "modal-lg" class provides maximum size 800px width for large size. The "modal-xl" class provides maximum size 1140px width for extra large size.

Syntax

The following syntax shows a small size modal function.

The following syntax shows a large-size modal function.

The following syntax shows an extra large-size modal function.

Example

The following example shows an animated modal function using Bootstrap 5 classes and html element.

Output

The following output shows a modal function with small size.

Bootstrap 5 Modal Function

The following output shows a modal function with large size.

Bootstrap 5 Modal Function

Full-Screen Modal Function

Bootstrap 5 modal function uses the "modal-fullscreen" class with a modal dialog box. The modal function covers all screens of the device and shows popup data. This data considers as text, form, and interactive user information.

Syntax

The following syntax shows a full-screen modal function.

Example

The following example shows a fullscreen modal function using Bootstrap 5 classes and html element.

Output

The following output shows a full-screen modal function.

Bootstrap 5 Modal Function

Centered Modal Function

Bootstrap 5 modal function uses the "modal-dialog-centered" class with a modal dialog box. This class shows a modal box in the center of the web application page or screen size. It looks attractive, interactive, and effective as a popup box to the user.

Syntax

The following syntax shows a centered modal function.

Example

The following example shows a centered modal function using Bootstrap 5 classes and html element.

Output

The following output shows the centered modal function.

Bootstrap 5 Modal Function

Scrollable Modal Function

Bootstrap 5 modal function uses the "modal-dialog-scrollable" class uses for large-size information. It shows the modal box in the default size and uses a scrollable function to scroll down the page. This scrollable class fits large-size information in the default or small-size modal function.

Syntax

The following syntax shows a centered modal function.

Example

The following example shows a scrollable modal function using Bootstrap 5 classes and html element.

Output

The following output shows a scrollable modal function.

Bootstrap 5 Modal Function

Responsive Full-Screen Modal Function

Bootstrap 5 modal function uses the "modal-fullscreen-*-*" class with a modal dialog box. The responsive modal function covers screen width sizes as per requirement and shows popup data. The modal function data covers and displays responsive data as a text and user form.

Syntax

The following syntax shows a small-size full-screen modal function. This class works for 576px screen-width devices.

The following syntax shows medium size full-screen modal function. This class works for 768px screen-width devices.

The following syntax shows a large-size full-screen modal function. This class works for 992px screen width devices.

The following syntax shows an extra large-size full-screen modal function. This class works for 1200px screen width devices.

The following syntax shows double extra large size full-screen modal function. This class works for 1400px screen width devices.

Example

The following example shows a responsive full-screen modal function using Bootstrap 5 classes and html element. We can use this class for the small size screen width.

Output

The following output shows a responsive full-screen modal function.

Bootstrap 5 Modal Function

Static Backdrop modal function

Bootstrap 5 modal function closes when clicking on outside of the popup box. It helps to stay modal function after clicking outside of the popup box. If we want to close the popup box with the close button, then use the static backdrop function.

Syntax

The following syntax shows the static backdrop modal function.

Example

The following example shows an animated modal function using Bootstrap 5 classes and html element.

Output

The following output shows a static backdrop modal function with information.

Bootstrap 5 Modal Function

Conclusion

The bootstrap 5 modal function works to store and display large-size information in small-size storage space. It helps developers and users to create attractive, simple, and user-friendly web applications.







Youtube For Videos Join Our Youtube Channel: Join Now

Feedback


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA