HOME C C++ PYTHON JAVA HTML CSS JAVASCRIPT BOOTSTRAP JQUERY REACT PHP SQL AJAX JSON DATA SCIENCE AI

How To Create a Modal

A Bootstrap modal is a lightweight and flexible JavaScript-based dialog that is designed to be easily customizable and responsive.

It can be triggered programmatically or in response to user actions, such as clicking a button.

Example

 <!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

     <!-- Modal Header -->
     <div class="modal-header">
        <h4 class="modal-title">Modal Heading
        <button type="button" class="btn-close" data-bs-dismiss="modal">
     v/div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
     </div>

     <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close
     </div>

   </div>
 </div>
</div>
You can click on above box to edit the code and run again.

Add animation

Use the .fade class to add a fading effect when opening and closing the modal:

Example

 <!-- Fading modal -->
 <div class="modal fade"> </div>

 <!-- Modal without animation -->
 <div class="modal"> </div>
You can click on above box to edit the code and run again.

Modal Size

Add the size class to the

element with class .modal-dialog:

Change the size of the modal by adding the .modal-sm class for small modals (max-width 300px), .modal-lg class for large modals (max-width 800px), or .modal-xl for extra large modals (max-width 1140px). Default is 500px max-width.

Example

<div class="modal-dialog modal-sm">
You can click on above box to edit the code and run again.

Fullscreen Modals

If you want the modal to span the whole width and height of the page, use the .modal-fullscreen class:

Example

<div class="modal-dialog modal-fullscreen">
You can click on above box to edit the code and run again.

Centered Modal

Center the modal vertically and horizontally within the page, with the .modal-dialog-centered class:

Example

 <div class="modal-dialog modal-dialog-centered">
You can click on above box to edit the code and run again.

Scrolling Modal

When you have a lot of content inside the modal, a scrollbar is added to the page. See the examples below to understand it:

Example

 <div class="modal-dialog">
You can click on above box to edit the code and run again.

Output