Para criar a paginação básica adicione a classe .pagination ao elemento ul. Então adicione em cada item a classe .page-item e a classe .page-link para os itens da ul que sejam links dentro da li:

Código do item acima :
     <div style="padding-left:5px" class="container">
      <ul class="pagination">
          <li class="page-item"><a class="page-link" href="#">Anterior</a></li>
          <li class="page-item"><a class="page-link" href="#">1</a></li>
          <li class="page-item"><a class="page-link" href="#">2</a></li>
          <li class="page-item"><a class="page-link" href="#">3</a></li>
          <li class="page-item"><a class="page-link" href="#">Posterior</a></li>
      </ul>
     </div>

---

Adicione a classe .active para saber em que página esta, por exemplo:

Código do item acima :
     <div style="padding-left:5px" class="container">
      <ul class="pagination">
          <li class="page-item"><a class="page-link" href="#">Anterior</a></li>
          <li class="page-item"><a class="page-link" href="#">1</a></li>
          <li class="page-item active"><a class="page-link" href="#">2</a></li>
          <li class="page-item"><a class="page-link" href="#">3</a></li>
          <li class="page-item"><a class="page-link" href="#">Posterior</a></li>
      </ul>
     </div>

---

Adicione a classe .disabled num item e ele será desabilitado, como neste exemplo ( supondo que esta na primeira página o link Anterior é desabilitado):

Código do item acima :
     <div style="padding-left:5px" class="container">
      <ul class="pagination">
          <li class="page-item disabled"><a class="page-link" href="#">Anterior</a></li>
          <li class="page-item"><a class="page-link" href="#">1</a></li>
          <li class="page-item"><a class="page-link" href="#">2</a></li>
          <li class="page-item"><a class="page-link" href="#">3</a></li>
          <li class="page-item"><a class="page-link" href="#">Posterior</a></li>
      </ul>
     </div>

---

Adicione a class .pagination-lg para blocos grandes ou .pagination-sm para blocos pequenos ou pagination para default.

Código do item acima :
   <ul class="pagination pagination-sm">
       <li class="page-item"><a class="page-link" href="#">Previous</a></li>
       <li class="page-item"><a class="page-link" href="#">1</a></li>
       <li class="page-item"><a class="page-link" href="#">2</a></li>
       <li class="page-item"><a class="page-link" href="#">3</a></li>
       <li class="page-item"><a class="page-link" href="#">Next</a></li>
   </ul>

---

Utilize a chasse .pagination para a posição default - à esquerda:

Código do item acima :
            <p>Utilize a chasse .pagination e justify-content-end para a posição à direita:</p>
            <ul class="pagination justify-content-end">
                <li class="page-item"><a class="page-link" href="javascript:void(0);">Anterior</a></li>
                <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
                <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
                <li class="page-item"><a class="page-link" href="javascript:void(0);">Posterior</a></li>
            </ul>
        </div>

---

A classe .breadcrumb informa a página corrente na hierarquia de navegação do site:

Código do item acima :
     <div style="padding-left:5px" class="container">
      <ul class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Fotos</a></li>
          <li class="breadcrumb-item"><a href="#">Verão 2017</a></li>
          <li class="breadcrumb-item"><a href="#">Italia</a></li>
          <li class="breadcrumb-item active">Roma</li>
      </ul>
     </div>

---