Tutorial

Sign Up

log In

Bootstrap
Bootstrap 5 Modal

❮ Previous

Next ❯

The Modal component in Bootstrap 5 allows you to create dialogs for user interaction, alerts, or additional content display. Modals can include headers, footers, and body content.

Basic Modal:

A simple modal with a button to toggle it.

Example
<!-- Button to trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch Modal
</button>

<!-- Modal Structure -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
This is the modal body content.
</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">Save changes</button>
</div>
</div>
</div>
</div>

Try it yourself

Static Backdrop:

Prevent the modal from closing when clicking outside of it by setting data-bs-backdrop="static" and data-bs-keyboard="false".

Example
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch Static Modal
</button>

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Static Backdrop</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
You can't close this modal by clicking outside or pressing Escape.
</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>

Try it yourself

Scrollable Modal:

Create a modal with a scrollable body for longer content.

Example
<div class="bootstrap5">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scrollableModal">
Launch Scrollable Modal
</button>
<div class="modal fade" id="scrollableModal" tabindex="-1" aria-labelledby="scrollableModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="scrollableModalLabel">Scrollable Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Add long content here to enable scrolling -->
<p>Repeated content... Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...Repeated content...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

Try it yourself

Vertically Centered Modal:

Center the modal vertically using .modal-dialog-centered.

Example
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#centeredModal">
Launch Centered Modal
</button>

<div class="modal fade" id="centeredModal" tabindex="-1" aria-labelledby="centeredModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="centeredModalLabel">Centered Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
This modal is vertically centered.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Try it yourself

Large,Small and Fullscreen Modals:

Change modal size using .modal-lg or .modal-sm or .modal-fullscreen

Large modal

Small modal

Fullscreen modal
Example
<b>Large Modal:</b>
<div class="modal-dialog modal-lg">
...
</div>

<b>Small Modal:</b>
<div class="modal-dialog modal-sm">
...
</div>

<b>Fullscreen Modal:</b>
<div class="modal-dialog modal-fullscreen">
...
</div>

Try it yourself

❮ Previous

Next ❯
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.