Lesson 23: Modals in Bootstrap 5

Modals in Bootstrap 5 are elements that display a popup window at the top of the current page. Below is how to create a dialog box or popup using Bootstrap 5.

 

How to create a modal in Bootstrap 5

The following sample code shows how to create a basic modal:

  Open modal   

Modal Heading

   Modal body.  Close 

For example:

 Bootstrap Example 

Modal template in Bootstrap 5

Click the button to open the modal.

  Mở popup trong TipsMake.com.com   

Modal Heading

   Modal body.  Close 

 

Add effects

Use a class .fadeto add a fade-in effect when opening and closing a modal:

Sample code:

For example:

 Bootstrap Example 

Example of a modal blur effect.

Click the button to open the modal.

  Mở modal   

QuanTriMang

   Modal body.  Close 

 

Modal size

Change the size of a modal by adding a class .modal-smfor small modals (maximum width 300px), a class .modal-lgfor large modals (maximum width 800px), or .modal-xlfor extra-large modals (maximum width 1140px). The default maximum width is 500px.

Add a size class to the element with the class   .modal-dialog:

Small modal:

For example:

 Bootstrap Example 

Small Modal

Click the button to open the modal.

  Mở modal trên QuanTriMang.com   

Modal Heading

   Modal body.  Close 

 

Large modal:

For example:

 Bootstrap Example 

Large Modal

Click the button to open the modal.

  Mở modal trên QuanTriMang.com   

Modal Heading

   Modal body.  Close 

Extremely large modal:

For example:

 Bootstrap Example 

Extra large Modal

Click the button to open this modal.

  Mở modal trên QuanTriMang.com   

Modal Heading

   Modal body.  Close 

 

By default, modals are medium-sized (maximum width 500px).

Full-screen modal

If you want the modal to extend across the entire width and height of the page, use the class .modal-fullscreen:

Sample code:

For example:

 Bootstrap Example 

Full-screen modal

Click the button to open the modal in full screen.

  Mở modal trên QuanTriMang.com   

Modal Heading

   Modal body.  Close 

Full-screen responsive modal

You can also control how the modal is fully displayed for each screen size, with the class .modal-fullscreen-*-*:

Class	Describe
.modal-fullscreen-sm-down	Full screen under 576px
.modal-fullscreen-md-down	Full screen under 768px
.modal-fullscreen-lg-down	Full screen under 992px
.modal-fullscreen-xl-down	Full screen under 1200px
.modal-fullscreen-xxl-down	Full screen under 1400px

Center of modal

Align modals vertically and horizontally on the same page using the class .modal-dialog-centered:

For example:

 Bootstrap Example 

For example, centering a modal vertically.

  Mở modal trên QuanTriMang.com   

Modal Heading

   Modal body.  Close 

 

Modal in roll form

When there is a lot of content inside a modal, a scroll bar will be added to the page. The basic code is as follows:

For example:

 Bootstrap Example 

Modal in roll form

  Open modal QuanTriMang.com   

Modal Heading

Some text to enable scrolling.

Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  Close 

However, you can scroll only within the modal, instead of the page itself, by adding .modal-dialog-scrollableit..modal-dialog:

For example:

 Bootstrap Example 

Rolled Modal

Click the button to open this modal.

  Mở modal trên QuanTriMang.com   

Modal Heading

Some text to enable scrolling.

Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  Close 

Above are the things you need to know about creating modals in Bootstrap 5. Hopefully, this article helps you better understand how to build a popup window for your website or application using Bootstrap 5 .