 <div class="modal fade" id="modal-summary" tabindex="-1" role="dialog" aria-labelledby="modal-summary" aria-hidden="true">
    <div class="modal-dialog modal- modal-dialog-centered modal-lg" role="document">
       <div class="modal-content">
            <div class="modal-header">
               <h5 id="summaryMaterial" class="modal-title">Affiliate Marketing dan Penerapannya</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body p-0">
               <div class="container-fluid">
                  <div class="table-responsive">
                     <table id="summaryTable" class="table align-items-center table-flush">
                       <thead class="thead-light">
                         <tr>
                           <th scope="col">No</th>
                           <th scope="col">Company</th>
                           <th scope="col">Divisi</th>
                           <th scope="col">Materi</th>
                           <th class="text-center" scope="col">Gambar</th>
                           <th scope="col">Video</th>
                           <th scope="col">Presenter</th>
                           <th scope="col">Peserta</th>
                         </tr>
                       </thead>
                       <tbody>
                       </tbody>
                     </table>
                  </div>
               </div>
            </div>
            <div class="modal-footer">
               <nav aria-label="...">
                  <ul id="summaryPagination" class="pagination justify-content-end mb-0">
                    <li class="page-item disabled">
                      <a class="page-link" href="#" tabindex="-1">
                        <i class="fas fa-angle-left"></i>
                        <span class="sr-only">Previous</span>
                      </a>
                    </li>
                    <li class="page-item active">
                      <a class="page-link" href="#">1</a>
                    </li>
                    <li class="page-item">
                      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                      <a class="page-link" href="#">
                        <i class="fas fa-angle-right"></i>
                        <span class="sr-only">Next</span>
                      </a>
                    </li>
                  </ul>
               </nav>
            </div>
      </div>
   </div>
</div>