Как создать: Как создать пагинацию в Bootstrap Pills?

Question

Я пытаюсь создать что-то похожее на страницу фотоконкурса с собакой и использую таблетки для самозагрузки.Допустим, я хочу разрешить 3 фото на страницу.Проблема в том, что нумерация страниц не видна должным образом или даже не видна.

То, что я ищу или это его форма дизайна.Я действительно не знаю, как исправить это или даже возможное решение для этого.Я искал по сети, но не смог найти ничего полезного.

Вот таблетки внутрь:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="pictureFeed container-fluid">
  <div class="row">
    <div class="col-md-12">
      <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="pills-latestPhotos-tab" data-toggle="pill" href="#pills-latestPhotos" role="tab" aria-controls="pills-latestPhotos" aria-selected="true">En Son Yüklenenler</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="pills-mostLiked-tab" data-toggle="pill" href="#pills-mostLiked" role="tab" aria-controls="pills-mostLiked" aria-selected="false">En Çok Beğenilenler</a>
        </li>

      </ul>
      <div class="row">

        <div class="tab-content pt-2 pl-1 text-center" id="pills-tabContent">
          <div class="tab-pane fade show active" id="pills-latestPhotos" role="tabpanel" aria-labelledby="pills-latestPhotos-tab">

            <div class="picture">
              <img src="https://www.pethealthpartnership.org/wp-content/uploads/2019/01/Mite-Infections-in-Pet-960x540.jpeg" alt="" class="img-fluid"></div>

            <div class="picture">
              <img src="https://www.pethealthpartnership.org/wp-content/uploads/2019/01/Mite-Infections-in-Pet-960x540.jpeg" alt="" class="img-fluid"></div>

            <div class="picture">
              <img src="https://www.pethealthpartnership.org/wp-content/uploads/2019/01/Mite-Infections-in-Pet-960x540.jpeg" alt="" class="img-fluid"></div>

            <div class="picture">
              <img src="https://www.pethealthpartnership.org/wp-content/uploads/2019/01/Mite-Infections-in-Pet-960x540.jpeg" alt="" class="img-fluid"></div>


            <div class="picture">
              <img src="https://www.pethealthpartnership.org/wp-content/uploads/2019/01/Mite-Infections-in-Pet-960x540.jpeg" alt="" class="img-fluid"></div>


            <div class="picture">
              <img src="https://www.pethealthpartnership.org/wp-content/uploads/2019/01/Mite-Infections-in-Pet-960x540.jpeg" alt="" class="img-fluid"></div>

          </div>
          <nav aria-label="Page navigation example">
            <ul class="pagination pg-blue">
              <li class="page-item ">
                <a class="page-link" tabindex="-1">
                  <<</a>
              </li>
              <li class="page-item"><a class="page-link">1</a></li>
              <li class="page-item active">
                <a class="page-link">2 <span class="sr-only">(current)</span></a>
              </li>
              <li class="page-item"><a class="page-link">3</a></li>
              <li class="page-item ">
                <a class="page-link">>></a>
              </li>
            </ul>
          </nav>
        </div>
        <div class="tab-pane fade" id="pills-mostLiked" role="tabpanel" aria-labelledby="pills-mostLiked-tab">

          <div class="row">

            <div class="tab-content pt-2 pl-1 text-center" id="pills-tabContent">
              <div class="tab-pane fade show active" id="pills-latestPhotos" role="tabpanel" aria-labelledby="pills-latestPhotos-tab">

                <div class="picture">
                  <img src="https://www.pethealthpartnership.org/wp-content/uploads/2019/01/Mite-Infections-in-Pet-960x540.jpeg" alt="" class="img-fluid"></div>


                <div class="picture">
                  <img src="https://www.pethealthpartnership.org/wp-content/uploads/2019/01/Mite-Infections-in-Pet-960x540.jpeg" alt="" class="img-fluid"></div>

                <div class="picture">
                  <img src="https://www.pethealthpartnership.org/wp-content/uploads/2019/01/Mite-Infections-in-Pet-960x540.jpeg" alt="" class="img-fluid"></div>

                <div class="picture">
                  <img src="https://www.pethealthpartnership.org/wp-content/uploads/2019/01/Mite-Infections-in-Pet-960x540.jpeg" alt="" class="img-fluid"></div>

                <div class="picture">
                  <img src="https://www.pethealthpartnership.org/wp-content/uploads/2019/01/Mite-Infections-in-Pet-960x540.jpeg" alt="" class="img-fluid"></div>
                <div class="picture">
                  <img src="https://www.pethealthpartnership.org/wp-content/uploads/2019/01/Mite-Infections-in-Pet-960x540.jpeg" alt="" class="img-fluid"></div>

              </div>
              <nav aria-label="Page navigation example">
                <ul class="pagination pg-blue">
                  <li class="page-item ">
                    <a class="page-link" tabindex="-1">
                      <<</a>
                  </li>
                  <li class="page-item"><a class="page-link">1</a></li>
                  <li class="page-item active">
                    <a class="page-link">2 <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="page-item"><a class="page-link">3</a></li>
                  <li class="page-item ">
                    <a class="page-link">>></a>
                  </li>
                </ul>
              </nav>
            </div>

          </div>
        </div>
      </div>