Bootstrap 5 Modal {No jQuery}

Bootstrap 5 Modal

Few examples of Modal in Bootstrap 5:

Bootstrap modal or a simple modal has generally following characteristics:

• The modal element is positioned over everything else on the web page. So, if you have paragraphs, images, videos, etc on your page.. the modal will be active while all other content becomes passive.
• Modal also removes the scroll from the body.
• If modal has large content then its scrollbar is displayed.

Quick Demos: Basic Modal, Scrolling Modal, Full-screen modal, Vertically centered Modal

Also, See:

Bootstrap 4 Modal | Bootstrap 3 Modals

A basic modal example

In the first example of Bootstrap version 5 Modal component, we have a simple modal with the following three components:

• Modal header
• Body
• Modal footer

As the name suggests, the header part contains the title/heading of the modal. The body part contains the content/message etc. while the footer contains buttons for closing the modal. Have a look at the live demo by clicking the button below or copy/paste the code below into your editor and run in your browser from localhost:

See online demo and code

The example of scrolling Modal

As mentioned in the intro section, if a modal contains larger content then its scrollbar should be displayed. Whereas the scrollbar of the containing page disappears/becomes inactive as the modal component is active.

In the demo, you can see the modal with the scrollbar. We have longer content in the body section:

See online demo and code

Just notice this line of code:

<div class=”modal-dialog modal-dialog-scrollable”>

So, you have to add the .modal-dialog-scrollable class in order to make the modal scrollable.

The example of full screen modal

You may also display the modal that covers the full viewport of the user. Place one of the following modifier classes with the .modal-dialog class:

See online demo and code

If you want to display the full screen modal for a specific screen width then you may use the modifier classes as follows:

• .modal-fullscreen – modal will always be a full screen for all screens.
• .modal-fullscreen-sm-down – full modal for screens below 576px
• .modal-fullscreen-md-down – for screens below 768px
• .modal-fullscreen-lg-down – below 992px
• .modal-fullscreen-xl-down – below 1200px
• .modal-fullscreen-xxl-down – below 1400px

A vertically centered Modal example

In the above examples (except full screen), you might notice the modal displayed upwards. For displaying the modal vertically centered position, you may add the .modal-dialog-centered class to the .modal-dialog class. See the demo below:

See online demo and code

Modals with different animations

Bootstrap 5 modal component has $modal-fade-transform class that allows you to set the scale of transform state. You may set different animations, e.g. a zoom-in animation can be done by using the:

$modal-fade-transform: scale(.8)

Same modal with different content example

You may also display the same modal with a little different content. For example, if you have a few buttons that trigger the same modal, however, a little content – e.g., the name or email/id is different (depending on the button) then you may do this by using HTML and JS as shown in the example below:

This is how it worked. You need to use the:

• relatedTarget
• HTML data-bs-* attributes

The example of static backdrop modal

In the following example, we have a modal with a static backdrop. That means, unlike the above examples, the modal will not close if you click outside it. For closing the modal, the “Close” button can be used:

See online demo and code

Adding Tooltips and popovers in a modal demo

You may also add tooltips and popovers in the modal window. The popovers or tooltips inside the modal are also dismissed as you close the modal. See an example below:

See online demo and code