Modal Dialogue

  
   
<div class="row">
   <div class="col-lg-12">
   <div class="card">
      <div class="card-body">
         <h5 class="card-title"></h5>
         <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#basicModal">
         Warning Modal
         </button>
         <button type="button" class="btn btn-danger ms-2" data-bs-toggle="modal" data-bs-target="#Danger-Modal">
         Danger Modal
         </button>
         <button type="button" class="btn btn-primary ms-2" data-bs-toggle="modal" data-bs-target="#Info-Modal">
         Info Modal
         </button>
         <button type="button" class="btn btn-negative ms-2" data-bs-toggle="modal" data-bs-target="#Error-Modal">
         Error Modal
         </button>
         <button type="button" class="btn btn-primary  ms-2" data-bs-toggle="modal" data-bs-target="#Restricted-Modal">
         Restricted Modal
         </button>
         <div class="modal fade" id="basicModal" tabindex="-1">
            <div class="modal-dialog basic-modal">
               <div class="modal-content">
                  <div class="modal-header">
                     <h5 class="modal-title"> <img class="custom-imgs-modal" src="assets/img/info.svg">Warning</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                     This is place holder text. Make sure the after effects of the action is explained here.<br>
                     The basic dialog for modals should contain only valuable and relevant information. Simplify dialogs by removing unnecessary elements or content that does not support user tasks.                                            
                  </div>
                  <div class="modal-footer">
                     <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">Cancel</button>
                     <button type="button" class="btn btn-primary">Confirm</button>
                  </div>
               </div>
            </div>
         </div>
         <div class="modal fade" id="Danger-Modal" tabindex="-1">
            <div class="modal-dialog basic-modal">
               <div class="modal-content">
                  <div class="modal-header">
                     <h5 class="modal-title"> <img class="custom-imgs-modal" src="assets/img/warningflag.svg">Delete</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                     Are you sure you want to delete ?                                                
                     <div class="modal-footer">
                        <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-danger">Delete</button>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="modal fade" id="Info-Modal" tabindex="-1">
            <div class="modal-dialog basic-modal">
               <div class="modal-content">
                  <div class="modal-header">
                     <h5 class="modal-title"> <img class="custom-imgs-modal" src="assets/img/alert.svg">Information</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                     This is place holder text. The basic dialog for modals should contain only valuable and relevant information. Simplify dialogs by removing unnecessary elements or content that does not support user tasks. If you find that the number of required elements for your design are making the dialog excessively large, then try a different design solution. 
                     <div class="modal-footer">
                        <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary">Button</button>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="modal fade" id="Error-Modal" tabindex="-1">
            <div class="modal-dialog basic-modal">
               <div class="modal-content">
                  <div class="modal-header">
                     <h5 class="modal-title"> <img class="custom-imgs-modal" src="assets/img/warningflag.svg">Error</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                     This is place holder text. Every error message should contain the explanation for the error. It is also required to provide the possible solution to avoide that error.                                                                                                
                     <div class="modal-footer">
                        <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">Close</button>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="modal fade" id="Restricted-Modal" tabindex="-1">
            <div class="modal-dialog basic-modal">
               <div class="modal-content">
                  <div class="modal-header">
                     <h5 class="modal-title"> <img class="custom-imgs-modal" src="assets/img/Restricted.svg">Restricted</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                     This is place holder text. Every error message should contain the explanation for the error. It is also required to provide the possible solution to avoide that error.                                                                                                
                     <div class="modal-footer">
                        <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">Close</button>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="col-lg-3">
   <div class="card">
      <div class="card-body">
         <h5 class="card-title">Scrolling long content
         </h5>
         <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalDialogScrollable">
         Scrolling Modal
         </button>
         <div class="modal fade" id="modalDialogScrollable" tabindex="-1">
            <div class="modal-dialog modal-dialog-scrollable">
               <div class="modal-content">
                  <div class="modal-header">
                     <h5 class="modal-title">Modal Dialog Scrollable</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                     This is place holder text. The basic dialog for modals should contain only valuable and relevant information. Simplify dialogs by removing unnecessary elements or content that does not support user tasks. If you find that the number of required elements for your design are making the dialog excessively large, then try a different design solution. This is place holder text. The basic dialog for modals should contain only valuable and relevant information. Simplify dialogs by removing unnecessary elements or content that does not support user tasks. If you find that the number of required elements for your design are making the dialog excessively large, then try a different design solution. This is place holder text. The basic dialog for modals should contain only valuable and relevant information. Simplify dialogs by removing unnecessary elements or content that does not support user tasks. If you find that the number of required elements for your design are making the dialog excessively large, then try a elements for your design are making the dialog excessively large, then try a elements for your design are making the dialog excessively large, then try.
                     <br><br><br><br><br><br><br><br>
                  </div>
                  <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                     <button type="button" class="btn btn-primary">Button</button>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="col-lg-9">
   <div class="card">
      <div class="card-body">
         <h5 class="card-title">Modal Sizes
         </h5>
         <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#Basic-Modal">
         Basic Modal
         </button>
         <button type="button" class="btn btn-primary ms-2" data-bs-toggle="modal" data-bs-target="#Small-Modal">
         Small Modal
         </button>
         <button type="button" class="btn btn-primary ms-2" data-bs-toggle="modal" data-bs-target="#Large-Modal">
         Large Modal 
         </button>
         <button type="button" class="btn btn-primary ms-2" data-bs-toggle="modal" data-bs-target="#Extra-Large-Modal">
         Extra Large Modal 
         </button>
         <div class="modal fade" id="Basic-Modal" tabindex="-1">
            <div class="modal-dialog basic-modal">
               <div class="modal-content">
                  <div class="modal-header">
                     <h5 class="modal-title"> Modal Dialog</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                     This is place holder text. The basic dialog for modals should contain only valuable and relevant information. Simplify dialogs by removing unnecessary elements or content that does not support user tasks. If you find that the number of required elements for your design are making the dialog excessively large, then try a different design solution. 
                     <div class="modal-footer">
                        <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary">Button</button>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="modal fade" id="Small-Modal" tabindex="-1">
            <div class="modal-dialog modal-sm">
               <div class="modal-content">
                  <div class="modal-header">
                     <h5 class="modal-title"> Modal dialog - Small </h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                     This is place holder text. The basic dialog for modals should contain only valuable and relevant information. Simplify dialogs by removing unnecessary elements or content that does not support user tasks. If you find that the number of required elements for your design are making the dialog excessively large, then try a different design solution. 
                     <div class="modal-footer">
                        <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary">Button</button>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="modal fade" id="Large-Modal" tabindex="-1">
            <div class="modal-dialog modal-lg">
               <div class="modal-content">
                  <div class="modal-header">
                     <h5 class="modal-title"> Modal dialog - Large</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                     This is place holder text. The basic dialog for modals should contain only valuable and relevant information. Simplify dialogs by removing unnecessary elements or content that does not support user tasks. If you find that the number of required elements for your design are making the dialog excessively large, then try a different design solution. 
                     <div class="modal-footer">
                        <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary">Button</button>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="modal fade" id="Extra-Large-Modal" tabindex="-1">
            <div class="modal-dialog modal-xl">
               <div class="modal-content">
                  <div class="modal-header">
                     <h5 class="modal-title"> Extra Large Modal</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                     This is place holder text. The basic dialog for modals should contain only valuable and relevant information. Simplify dialogs by removing unnecessary elements or content that does not support user tasks. If you find that the number of required elements for your design are making the dialog excessively large, then try a different design solution. 
                     <div class="modal-footer">
                        <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary">Button</button>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>



</div>
        
      
              

  

   
      .modal-title {
       color: #363431;
     }
     
     .btn-close {
       width: 2em;
       height: 2em;
     }
     
     img.custom-imgs-modal {
       width: 22px;
       height: 22px;
       margin-right: 15px;
     }
     
     .modal-body {
       color: #5F5F5F;
       font-size: 14px;
     }
     
     .modal-header {
         border-bottom: none;
     }
     
     .modal-footer {
       border-top: none;
     }
     
     .btn.btn-cancel {
         color: #5F5F5F;
     }
     
     .btn.btn-cancel:hover {
       color: #167DF5 !important;
     }
     
     .modal-dialog.basic-modal {
       max-width: 600px !important;
     }
     
     .modal-body {
       padding-top: 0;
       padding-bottom: 0;
     }
     
     button.btn.btn-cancel:active {
       color: white;
       background-color: white;
       border: none;
     }
     
     .modal-dialog-scrollable .modal-body {
       border-top: 1.5px solid #dee2e6;
       padding: 15px;
     }