Documentation

Bskin Bootstrap 5 skin ui kit

Modal

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

Modal

  
      <!-- Default Modal Begin-->
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#defaultModal">
      Default Modal
      </button>
      <!-- Modal -->
      <div class="modal fade" id="defaultModal" tabindex="-1" aria-labelledby="defaultModalLabel" aria-hidden="true">
      <div class="modal-dialog">
      <div class="modal-content">
      <div class="modal-header">
      <h5 class="modal-title" id="defaultModalLabel">Default modal</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
      </button>
      </div>
      <div class="modal-body">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. 
      </p>
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary btn-sm">Save changes</button>
      </div>
      </div>
      </div>
      </div>
      <!-- Default Modal End-->


   
      <!-- Scrollable modal Begin-->
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scrollableModal">
      Scrollable modal
      </button>
      <!-- Modal -->
      <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">
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      </p>
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      </p>
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      </p>
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary btn-sm">Save changes</button>
      </div>
      </div>
      </div>
      </div>
      <!-- Scrollable modal End-->


   
      <!-- Centered Modal Begin-->
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#centerModal">
      Centered Modal
      </button>
      <!-- Modal -->
      <div class="modal fade" id="centerModal" tabindex="-1" aria-labelledby="centerModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
      <div class="modal-header">
      <h5 class="modal-title" id="centerModalLabel">Centered Modal</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
      </button>
      </div>
      <div class="modal-body">
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      </p>
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary btn-sm">Save changes</button>
      </div>
      </div>
      </div>
      </div>
      <!-- Centered Modal End-->


   
      <!-- Image Modal Begin-->
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#imageModal">
      Image Modal
      </button>
      <!-- Modal -->
      <div class="modal fade" id="imageModal" tabindex="-1">
      <div class="modal-dialog" role="document">
      <div class="modal-content">
      <div class="curve">
      <div class="modal-header p-0">
      <img src="images/modal.jpg" class="img-fluid" alt="modal" title="modal">
      </div>
      </div>
      <div class="modal-body">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
      </p>
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary btn-sm">Save changes</button>
      </div>
      </div>
      </div>
      </div>
      <!-- Image Modal End-->

Modal Size

  
      <!-- Small Modal Begin-->
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#smallModal">
      Small Modal
      </button>
      <!-- Modal -->
      <div class="modal fade" id="smallModal" tabindex="-1" aria-labelledby="smallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
      <div class="modal-content">
      <div class="modal-header">
      <h5 class="modal-title" id="smallModalLabel">Small Modal</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
      </button>
      </div>
      <div class="modal-body">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. 
      </p>
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary btn-sm">Save changes</button>
      </div>
      </div>
      </div>
      </div>
      <!-- Small Modal End-->


   
      <!-- Large modal Begin-->
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#largeModal">
      Large Modal
      </button>
      <!-- Modal -->
      <div class="modal fade" id="largeModal" tabindex="-1" aria-labelledby="largeModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
      <div class="modal-content">
      <div class="modal-header">
      <h5 class="modal-title" id="largeModalLabel">Large Modal</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
      </button>
      </div>
      <div class="modal-body">
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      </p>
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary btn-sm">Save changes</button>
      </div>
      </div>
      </div>
      </div>
      <!-- Large modal End-->


   
      <!--  Extra Large Modal Begin-->
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#extralargeModal">
      Extra Large Modal
      </button>
      <!-- Modal -->
      <div class="modal fade" id="extralargeModal" tabindex="-1" aria-labelledby="extralargeModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-xl">
      <div class="modal-content">
      <div class="modal-header">
      <h5 class="modal-title" id="extralargeModalLabel">Extra Large Modal</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
      </button>
      </div>
      <div class="modal-body">
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      </p>
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary btn-sm">Save changes</button>
      </div>
      </div>
      </div>
      </div>
      <!--  Extra Large Modal End-->


   
      <!-- Fullscreen Modal Begin-->
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fullScreenModal">
      Fullscreen Modals
      </button>
      <!-- Modal -->
      <div class="modal fade" id="fullScreenModal" tabindex="-1" aria-labelledby="fullScreenModalLabel" aria-hidden="true">
      <div class="modal-dialog  modal-fullscreen">
      <div class="modal-content">
      <div class="modal-header">
      <h5 class="modal-title" id="fullScreenModalLabel">Fullscreen Modals</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
      </button>
      </div>
      <div class="modal-body">
      <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      </p>
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary btn-sm">Save changes</button>
      </div>
      </div>
      </div>
      </div>
      <!-- Fullscreen Modal End-->

© Copyright-2022 DesignCollection.in. All rights reserved.