Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

kenprogrammer's avatar

InertiaJS Pagination in bootstrap

All the examples of InertiaJS pagination are using Tailwind CSS. For those not familiar with Tailwind CSS ,this is an example pagination component using bootstrap. Am using Svelte thus if using Vue or React just replace the Svelte syntax with Vue or React Syntax.

Pagination.svelte

<script>
    import { inertia } from '@inertiajs/inertia-svelte'
  
    export let links = []
</script>
{#if links.length > 3}
  <nav aria-label="...">
      <ul class="pagination pagination-sm">
          {#each links as link, key (key)}
              {#if link.url === null}
                <li class="page-item">
                    <a class="page-link" href="#!" tabindex="-1">{@html link.label}</a>
                </li>
              {:else}
                <li class="page-item">
                    <a class="page-link" use:inertia href="{link.url}">{@html link.label}</a>
                </li>
              {/if}
          {/each}
      </ul>
  </nav>
{/if}

Raw Bootstrap example:

<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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>
  </ul>
</nav>

Cheers!

0 likes
0 replies

Please or to participate in this conversation.