<!-- Modal Content-->
        <div class="modal position-static d-block" > <!-- Use "fade" instead "position-static d-block" for modal action-->
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ModalLabel">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Donec iaculis diam eu suscipit varius. Praesent vitae laoreet lectus, sit amet porta arcu.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning btn-sm  px-2" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-success btn-sm  px-2">Save changes</button>
                </div>
            </div>
        </div>
        </div>
        

        <!-- Button -->
        <button type="button" class="btn btn-primary  py-2 px-3" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Default Modal
        </button>
        
        <!-- Button for Small -->
        <button type="button" class="btn btn-primary  py-2 px-3" data-bs-toggle="modal" data-bs-target="#smallModal">
        Small Size
        </button>
        
        <!-- Button for Medium -->
        <button type="button" class="btn btn-primary  py-2 px-3" data-bs-toggle="modal" data-bs-target="#mediumModal">
        Medium Size
        </button>
        
        <!-- Button for Large -->
        <button type="button" class="btn btn-primary  py-2 px-3" data-bs-toggle="modal" data-bs-target="#largeModal">
        Large Size
        </button>
        
        <!-- Button for XLarge -->
        <button type="button" class="btn btn-primary  py-2 px-3" data-bs-toggle="modal" data-bs-target="#xlargeModal">
        Extra Large Size
        </button>
        
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        ---
        </div>
        
        <!-- Modal -->
        <div class="modal modal-sm fade" id="smallModal" tabindex="-1" aria-labelledby="smallModalLabel" aria-hidden="true">
        ---
        </div>
        
        <!-- Modal -->
        <div class="modal modal-md fade" id="mediumModal" tabindex="-1" aria-labelledby="mediumModalLabel" aria-hidden="true">
        ---
        </div>
        
        <!-- Modal -->
        <div class="modal modal-lg fade" id="largeModal" tabindex="-1" aria-labelledby="largeModalLabel" aria-hidden="true">
        ---
        </div>
        
        <!-- Modal -->
        <div class="modal modal-xl fade" id="xlargeModal" tabindex="-1" aria-labelledby="xlargeModalLabel" aria-hidden="true">
        ---
        </div>
        

<!-- Button for static backdrop modal -->
        <button type="button" class="btn btn-primary  py-2 px-3" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
        Static backdrop Modal
        </button>
        
        <!-- Modal -->
        <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>
        </div>
        
        
        <!-- Button for scrollable modal -->
        <button type="button" class="btn btn-primary  py-2 px-3" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable">
        Scrollable Modal
        </button>
        
        <!-- Modal -->
        <div class="modal fade" id="exampleModalScrollable" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalScrollableLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            
        </div>
        </div>
        
        
        <!-- Button for scrollable modal -->
        <button type="button" class="btn btn-primary  py-2 px-3" data-bs-toggle="modal" data-bs-target="#exampleModalCenter">
        Vertically Centered
        </button>
        
        <!-- Modal -->
        <div class="modal fade" id="exampleModalCenter" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalCenterLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            
        </div>
        </div>
        
        <!-- Button for scrollable modal -->
        <button type="button" class="btn btn-primary  py-2 px-3" data-bs-toggle="modal" data-bs-target="#exampleModalCenterScrollable">
        Vertically Centered Scrollable
        </button>
        
        <!-- Modal -->
        <div class="modal fade" id="exampleModalCenterScrollable" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalCenterScrollableLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            
        </div>
        </div>
        
        <!-- Button for Full Screen -->
        <button type="button" class="btn btn-primary  py-2 px-3" data-bs-toggle="modal" data-bs-target="#fullScreenModal">
        Full Screen Size
        </button>
        
        <!-- Modal -->
        <div class="modal fade" id="fullScreenModal" data-bs-keyboard="false" tabindex="-1" aria-labelledby="fullScreenModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            
        </div>
        </div>
        

        <!-- Button for primary -->
        <button type="button" class="btn btn-primary py-2 px-3 mx-1" data-bs-toggle="modal" data-bs-target="#primaryModal">
            Primary Color
        </button>
        
        <!-- Button for secondary -->
        <button type="button" class="btn btn-secondary py-2 px-3 mx-1" data-bs-toggle="modal" data-bs-target="#secondaryModal">
            Secondary Color
        </button>
        
        <!-- Button for success -->
        <button type="button" class="btn btn-success text-white py-2 px-3 mx-1" data-bs-toggle="modal" data-bs-target="#successModal">
            Success Color
        </button>
        
        <!-- Button for warning -->
        <button type="button" class="btn btn-warning py-2 px-3 mx-1" data-bs-toggle="modal" data-bs-target="#warningModal">
            Warning Color
        </button>
        
        <!-- Button for danger -->
        <button type="button" class="btn btn-danger py-2 px-3 mx-1" data-bs-toggle="modal" data-bs-target="#dangerModal">
            Danger Color
        </button>
        
        <!-- Modal -->
        <div class="modal fade" id="primaryModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            ---
        </div>
        
        <!-- Modal -->
        <div class="modal modal-sm fade" id="secondaryModal">
            ---
        </div>
        
        <!-- Modal -->
        <div class="modal modal-md fade" id="successModal">
            ---
        </div>
        
        <!-- Modal -->
        <div class="modal modal-lg fade" id="warningModal">
            
        </div>
        
        <!-- Modal -->
        <div class="modal modal-xl fade" id="dangerModal">
            
        </div>