Craft 3 Pagination with Bootstrap 4

craft3-bootstrap4-pagination.twig

{# - https://getbootstrap.com/docs/4.0/components/pagination/ -#}
{# - https://docs.craftcms.com/v3/dev/tags/paginate.html -#}

{%- set query = craft.entries.section('yourSectionHandle').limit(10) -%}
{%- paginate query as pageInfo, pageEntries -%}

<ol>
  {%- for entry in pageEntries -%}
    <li><a href="{{ entry.url }}">{{ entry.title }}</a></li>
  {%- endfor -%}
</ol>

<nav aria-label="Pagination">
  <ul class="pagination">
    {%- if pageInfo.prevUrl -%}
      <li class="page-item">
        <a class="page-link" href="{{ pageInfo.prevUrl }}" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
          <span class="sr-only">Previous</span>
        </a>
      </li>
    {%- endif -%}
    {%- for page, url in pageInfo.getPrevUrls(10) -%}
      <li class="page-item">
        <a class="page-link" href="{{ url }}">
          {{ page }}
        </a>
      </li>
    {%- endfor -%}
    {%- if pageInfo.currentPage -%}
      <li class="page-item active">
        <a class="page-link" href="#">
          {{ pageInfo.currentPage }}
          <span class="sr-only">(current)</span>
        </a>
      </li>
    {%- endif -%}
    {%- for page, url in pageInfo.getNextUrls(10) -%}
      <li class="page-item">
        <a class="page-link" href="{{ url }}">
          {{ page }}
        </a>
      </li>
    {%- endfor -%}
    {%- if pageInfo.nextUrl -%}
      <li class="page-item">
        <a class="page-link" href="{{ pageInfo.nextUrl }}" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
          <span class="sr-only">Next</span>
        </a>
      </li>
    {% endif %}
  </ul>
</nav>