Bootstrap 5 Modal Pagination

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

            <!-- Modal -->
            <div class="modal top fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
              aria-hidden="true" data-mdb-backdrop="true" data-mdb-keyboard="true">
              <div class="modal-dialog  ">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal pagination example</h5>
                    <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                    <div class="tab-content" id="ex1-content">
                      <div class="tab-pane fade show active" id="ex1-pills-1" role="tabpanel" aria-labelledby="ex1-tab-1">
                        <h5 class="my-3">Page 1</h5>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur ratione minima suscipit! Ab
                          quam distinctio tempora ad eveniet corporis repellendus?</p>
                      </div>
                      <div class="tab-pane fade" id="ex1-pills-2" role="tabpanel" aria-labelledby="ex1-tab-2">
                        <h5 class="my-3">Page 2</h5>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut accusantium maiores, distinctio ut,
                          quasi sapiente unde, dolore vitae quas officia corrupti maxime fugit. Omnis, nemo?</p>
                      </div>
                      <div class="tab-pane fade" id="ex1-pills-3" role="tabpanel" aria-labelledby="ex1-tab-3">
                        <h5 class="my-3">Page 3</h5>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur provident numquam autem
                          dolor quibusdam voluptates.</p>
                      </div>
                    </div>
                  </div>
                  <div class="modal-footer justify-content-center align-items-center">
                    <!-- Pills navs -->
                    <ul class="nav nav-pills mb-3" id="ex1" role="tablist">
                      <li class="nav-item" role="presentation">
                        <a class="nav-link active" id="ex1-tab-1" data-mdb-pill-init href="#ex1-pills-1" role="tab"
                          aria-controls="ex1-pills-1" aria-selected="true">1</a>
                      </li>
                      <li class="nav-item" role="presentation">
                        <a class="nav-link" id="ex1-tab-2" data-mdb-pill-init href="#ex1-pills-2" role="tab"
                          aria-controls="ex1-pills-2" aria-selected="false">2</a>
                      </li>
                      <li class="nav-item" role="presentation">
                        <a class="nav-link" id="ex1-tab-3" data-mdb-pill-init href="#ex1-pills-3" role="tab"
                          aria-controls="ex1-pills-3" aria-selected="false">3</a>
                      </li>
                    </ul>
                    <!-- Pills navs -->
                  </div>
                </div>
              </div>
            </div>