Modal

Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Bootstrap Modal documentation

Examples

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

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

                      <!-- Modal -->
                      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                          <div class="modal-content shadow-dark-80">
                            <div class="modal-header border-0 pb-0 align-items-start ps-4">
                              <h5 class="modal-title pt-3" id="exampleModalLabel">Delete Account?</h5>
                              <button type="button" class="btn btn-icon p-0" data-dismiss="modal" aria-label="Close">
                                <svg data-name="icons/tabler/close" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                  <rect data-name="Icons/Tabler/Close background" width="16" height="16" fill="none"></rect>
                                  <path d="M.82.1l.058.05L6,5.272,11.122.151A.514.514,0,0,1,11.9.82l-.05.058L6.728,6l5.122,5.122a.514.514,0,0,1-.67.777l-.058-.05L6,6.728.878,11.849A.514.514,0,0,1,.1,11.18l.05-.058L5.272,6,.151.878A.514.514,0,0,1,.75.057Z" transform="translate(2 2)" fill="#1e1e1e"></path>
                                </svg>
                              </button>
                            </div>
                            <div class="modal-body pt-2 px-4">
                              <p>You’re about to delete your account which includes all your personal data and information.</p>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-light px-2" data-dismiss="modal"><span class="px-1">Cancel</span></button>
                              <button type="button" class="btn btn-primary px-2 ms-2"><span class="px-1">Delete</span></button>
                            </div>
                          </div>
                        </div>
                      </div>
                    
                  

Static backdrop

When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.

                    
                      <!-- Button trigger modal -->
                      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
                        Launch static backdrop modal
                      </button>

                      <!-- Modal -->
                      <div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                          <div class="modal-content shadow-dark-80">
                            <div class="modal-header border-0 pb-0 align-items-start ps-4">
                              <h5 class="modal-title pt-3" id="exampleModalLabel25">Delete Account?</h5>
                              <button type="button" class="btn btn-icon p-0" data-dismiss="modal" aria-label="Close">
                                <svg data-name="icons/tabler/close" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                  <rect data-name="Icons/Tabler/Close background" width="16" height="16" fill="none"></rect>
                                  <path d="M.82.1l.058.05L6,5.272,11.122.151A.514.514,0,0,1,11.9.82l-.05.058L6.728,6l5.122,5.122a.514.514,0,0,1-.67.777l-.058-.05L6,6.728.878,11.849A.514.514,0,0,1,.1,11.18l.05-.058L5.272,6,.151.878A.514.514,0,0,1,.75.057Z" transform="translate(2 2)" fill="#1e1e1e"></path>
                                </svg>
                              </button>
                            </div>
                            <div class="modal-body pt-2 px-4">
                              <p>You’re about to delete your account which includes all your personal data and information.</p>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-light px-2" data-dismiss="modal"><span class="px-1">Cancel</span></button>
                              <button type="button" class="btn btn-primary px-2 ms-2"><span class="px-1">Delete</span></button>
                            </div>
                          </div>
                        </div>
                      </div>
                    
                  

Scrolling long content

When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

                    
                      <!-- Button trigger modal -->
                      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLong">
                        Launch demo modal
                      </button>

                      <!-- Modal -->
                      <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                          <div class="modal-content shadow-dark-80">
                            <div class="modal-header border-0 pb-0 align-items-start ps-4">
                              <h5 class="modal-title pt-3" id="exampleModalLabel26">Delete Account?</h5>
                              <button type="button" class="btn btn-icon p-0" data-dismiss="modal" aria-label="Close">
                                <svg data-name="icons/tabler/close" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                  <rect data-name="Icons/Tabler/Close background" width="16" height="16" fill="none"></rect>
                                  <path d="M.82.1l.058.05L6,5.272,11.122.151A.514.514,0,0,1,11.9.82l-.05.058L6.728,6l5.122,5.122a.514.514,0,0,1-.67.777l-.058-.05L6,6.728.878,11.849A.514.514,0,0,1,.1,11.18l.05-.058L5.272,6,.151.878A.514.514,0,0,1,.75.057Z" transform="translate(2 2)" fill="#1e1e1e"></path>
                                </svg>
                              </button>
                            </div>
                            <div class="modal-body pt-2 px-4">
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-light px-2" data-dismiss="modal"><span class="px-1">Cancel</span></button>
                              <button type="button" class="btn btn-primary px-2 ms-2"><span class="px-1">Delete</span></button>
                            </div>
                          </div>
                        </div>
                      </div>
                    
                  

You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to .modal-dialog.

                    
                      <!-- Button trigger modal -->
                      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable">
                        Launch demo modal
                      </button>

                      <!-- Modal -->
                      <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-scrollable" role="document">
                          <div class="modal-content shadow-dark-80">
                            <div class="modal-header border-0 pb-0 align-items-start ps-4">
                              <h5 class="modal-title pt-3" id="exampleModalLabel27">Delete Account?</h5>
                              <button type="button" class="btn btn-icon p-0" data-dismiss="modal" aria-label="Close">
                                <svg data-name="icons/tabler/close" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                  <rect data-name="Icons/Tabler/Close background" width="16" height="16" fill="none"></rect>
                                  <path d="M.82.1l.058.05L6,5.272,11.122.151A.514.514,0,0,1,11.9.82l-.05.058L6.728,6l5.122,5.122a.514.514,0,0,1-.67.777l-.058-.05L6,6.728.878,11.849A.514.514,0,0,1,.1,11.18l.05-.058L5.272,6,.151.878A.514.514,0,0,1,.75.057Z" transform="translate(2 2)" fill="#1e1e1e"></path>
                                </svg>
                              </button>
                            </div>
                            <div class="modal-body pt-2 px-4">
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-light px-2" data-dismiss="modal"><span class="px-1">Cancel</span></button>
                              <button type="button" class="btn btn-primary px-2 ms-2"><span class="px-1">Delete</span></button>
                            </div>
                          </div>
                        </div>
                      </div>
                    
                  

Vertically centered

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

                    
                      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenter">
                        Vertically centered modal
                      </button>

                      <div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered" role="document">
                          <div class="modal-content shadow-dark-80">
                            <div class="modal-header border-0 pb-0 align-items-start ps-4">
                              <h5 class="modal-title pt-3" id="exampleModalLabel29">Vertically centered modal</h5>
                              <button type="button" class="btn btn-icon p-0" data-dismiss="modal" aria-label="Close">
                                <svg data-name="icons/tabler/close" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                  <rect data-name="Icons/Tabler/Close background" width="16" height="16" fill="none"></rect>
                                  <path d="M.82.1l.058.05L6,5.272,11.122.151A.514.514,0,0,1,11.9.82l-.05.058L6.728,6l5.122,5.122a.514.514,0,0,1-.67.777l-.058-.05L6,6.728.878,11.849A.514.514,0,0,1,.1,11.18l.05-.058L5.272,6,.151.878A.514.514,0,0,1,.75.057Z" transform="translate(2 2)" fill="#1e1e1e"></path>
                                </svg>
                              </button>
                            </div>
                            <div class="modal-body pt-2 px-4">
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-light px-2" data-dismiss="modal"><span class="px-1">Cancel</span></button>
                              <button type="button" class="btn btn-primary px-2 ms-2"><span class="px-1">Delete</span></button>
                            </div>
                          </div>
                        </div>
                      </div>

                      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable">
                        Vertically centered scrollable modal
                      </button>

                      <div id="exampleModalCenteredScrollable" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
                          <div class="modal-content shadow-dark-80">
                            <div class="modal-header border-0 pb-0 align-items-start ps-4">
                              <h5 class="modal-title pt-3" id="exampleModalLabel">Vertically centered scrollable modal</h5>
                              <button type="button" class="btn btn-icon p-0" data-dismiss="modal" aria-label="Close">
                                <svg data-name="icons/tabler/close" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                  <rect data-name="Icons/Tabler/Close background" width="16" height="16" fill="none"></rect>
                                  <path d="M.82.1l.058.05L6,5.272,11.122.151A.514.514,0,0,1,11.9.82l-.05.058L6.728,6l5.122,5.122a.514.514,0,0,1-.67.777l-.058-.05L6,6.728.878,11.849A.514.514,0,0,1,.1,11.18l.05-.058L5.272,6,.151.878A.514.514,0,0,1,.75.057Z" transform="translate(2 2)" fill="#1e1e1e"></path>
                                </svg>
                              </button>
                            </div>
                            <div class="modal-body pt-2 px-4">
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-light px-2" data-dismiss="modal"><span class="px-1">Cancel</span></button>
                              <button type="button" class="btn btn-primary px-2 ms-2"><span class="px-1">Delete</span></button>
                            </div>
                          </div>
                        </div>
                      </div>
                    
                  

Sizes

Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

Size Class Modal max-width
Small .modal-sm 400px
Default None 550px
Large .modal-lg 800px
Extra large .modal-xl 1140px
Fullscreen Modal .modal-fullscreen Always

Our default modal without modifier class constitutes the “medium” size modal.

                    
                      <button type="button" class="btn btn-primary m-1" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">Full screen</button>
                  
                      <div class="modal fade" id="exampleModalFullscreen" tabindex="-1" style="display: none;" aria-hidden="true">
                        <div class="modal-dialog modal-fullscreen">
                          <div class="modal-content shadow-dark-80">
                            <div class="modal-header border-0 pb-0 align-items-start ps-4">
                              <h5 class="modal-title pt-3" id="exampleModalLabel">Delete Account?</h5>
                              <button type="button" class="btn btn-icon p-0" data-dismiss="modal" aria-label="Close">
                                <svg data-name="icons/tabler/close" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                  <rect data-name="Icons/Tabler/Close background" width="16" height="16" fill="none"></rect>
                                  <path d="M.82.1l.058.05L6,5.272,11.122.151A.514.514,0,0,1,11.9.82l-.05.058L6.728,6l5.122,5.122a.514.514,0,0,1-.67.777l-.058-.05L6,6.728.878,11.849A.514.514,0,0,1,.1,11.18l.05-.058L5.272,6,.151.878A.514.514,0,0,1,.75.057Z" transform="translate(2 2)" fill="#1e1e1e"></path>
                                </svg>
                              </button>
                            </div>
                            <div class="modal-body pt-2 px-4">
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-light px-2" data-dismiss="modal"><span class="px-1">Cancel</span></button>
                              <button type="button" class="btn btn-primary px-2 ms-2"><span class="px-1">Delete</span></button>
                            </div>
                          </div>
                        </div>
                      </div>
    
                      <button type="button" class="btn btn-primary m-1" data-bs-toggle="modal" data-bs-target=".bd-example-modal-xl">Extra large modal</button>
    
                      <div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-xl" role="document">
                          <div class="modal-content shadow-dark-80">
                            <div class="modal-header border-0 pb-0 align-items-start ps-4">
                              <h5 class="modal-title pt-3" id="exampleModalLabel">Extra Large Modal</h5>
                              <button type="button" class="btn btn-icon p-0" data-dismiss="modal" aria-label="Close">
                                <svg data-name="icons/tabler/close" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                  <rect data-name="Icons/Tabler/Close background" width="16" height="16" fill="none"></rect>
                                  <path d="M.82.1l.058.05L6,5.272,11.122.151A.514.514,0,0,1,11.9.82l-.05.058L6.728,6l5.122,5.122a.514.514,0,0,1-.67.777l-.058-.05L6,6.728.878,11.849A.514.514,0,0,1,.1,11.18l.05-.058L5.272,6,.151.878A.514.514,0,0,1,.75.057Z" transform="translate(2 2)" fill="#1e1e1e"></path>
                                </svg>
                              </button>
                            </div>
                            <div class="modal-body pt-2 px-4">
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-light px-2" data-dismiss="modal"><span class="px-1">Cancel</span></button>
                              <button type="button" class="btn btn-primary px-2 ms-2"><span class="px-1">Delete</span></button>
                            </div>
                          </div>
                        </div>
                      </div>
    
                      <button type="button" class="btn btn-primary m-1" data-bs-toggle="modal" data-bs-target=".bd-example-modal-lg">Large modal</button>
    
                      <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-lg" role="document">
                          <div class="modal-content shadow-dark-80">
                            <div class="modal-header border-0 pb-0 align-items-start ps-4">
                              <h5 class="modal-title pt-3" id="exampleModalLabel">Large Modal</h5>
                              <button type="button" class="btn btn-icon p-0" data-dismiss="modal" aria-label="Close">
                                <svg data-name="icons/tabler/close" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                  <rect data-name="Icons/Tabler/Close background" width="16" height="16" fill="none"></rect>
                                  <path d="M.82.1l.058.05L6,5.272,11.122.151A.514.514,0,0,1,11.9.82l-.05.058L6.728,6l5.122,5.122a.514.514,0,0,1-.67.777l-.058-.05L6,6.728.878,11.849A.514.514,0,0,1,.1,11.18l.05-.058L5.272,6,.151.878A.514.514,0,0,1,.75.057Z" transform="translate(2 2)" fill="#1e1e1e"></path>
                                </svg>
                              </button>
                            </div>
                            <div class="modal-body pt-2 px-4">
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-light px-2" data-dismiss="modal"><span class="px-1">Cancel</span></button>
                              <button type="button" class="btn btn-primary px-2 ms-2"><span class="px-1">Delete</span></button>
                            </div>
                          </div>
                        </div>
                      </div>
    
                      <button type="button" class="btn btn-primary m-1" data-bs-toggle="modal" data-bs-target=".bd-example-modal-sm">Small modal</button>
    
                      <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-sm" role="document">
                          <div class="modal-content shadow-dark-80">
                            <div class="modal-header border-0 pb-0 align-items-start ps-4">
                              <h5 class="modal-title pt-3" id="exampleModalLabel">Small Modal</h5>
                              <button type="button" class="btn btn-icon p-0" data-dismiss="modal" aria-label="Close">
                                <svg data-name="icons/tabler/close" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                  <rect data-name="Icons/Tabler/Close background" width="16" height="16" fill="none"></rect>
                                  <path d="M.82.1l.058.05L6,5.272,11.122.151A.514.514,0,0,1,11.9.82l-.05.058L6.728,6l5.122,5.122a.514.514,0,0,1-.67.777l-.058-.05L6,6.728.878,11.849A.514.514,0,0,1,.1,11.18l.05-.058L5.272,6,.151.878A.514.514,0,0,1,.75.057Z" transform="translate(2 2)" fill="#1e1e1e"></path>
                                </svg>
                              </button>
                            </div>
                            <div class="modal-body pt-2 px-4">
                              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-light px-2" data-dismiss="modal"><span class="px-1">Cancel</span></button>
                              <button type="button" class="btn btn-primary px-2 ms-2"><span class="px-1">Delete</span></button>
                            </div>
                          </div>
                        </div>
                      </div>