Bootstrap 4 – Pagination

Pada pembuatan website kita perlu menggunakan pagination sebagai lanjutan halaman. Misalnya ada 20 artikel jadi kita tidak ingin menampilkan sekaligus artikelnya pada satu halaman. Maka kita menggunakan pagination untuk menjadikan 2 halaman atau 4 halaman tergantung selerah kita. Membuat pagination cukuplah mudah bisa kita lihat hasil dibawah ini dan penjelasannya paling bawah.

<nav>
  <ul class="pagination">
    <li class="page-item"><a href="#" class="page-link">Sebelumnya</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">4</a></li>
    <li class="page-item"><a href="#" class="page-link">Selanjutnya</a></li>
  </ul>
</nav>
<nav>
  <ul class="pagination justify-content-center">
    <li class="page-item"><a href="#" class="page-link">«</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">4</a></li>
    <li class="page-item"><a href="#" class="page-link">»</a></li>
  </ul>
</nav>

Pada pembuatan pagination diawali dengan tag <nav>, jadi agar lebih rapi dengan penentuan struktur pada tag html. Silakan simak beberapa class yang harus kita pahami.

• Pagination merupakan class default jadi harus kita gunakan apabila ingin menggunakannya.
• Page-item kita boleh menggunakannya atau tidak, karena waktu tidak menggunakannya hanya kehilangan border-radius css.
• Page-link class ini sangat wajib digunakan, waktu di uji coba tampilan pagination menjadi berantakan.
• Justify-content-center ini merupakan cara kita sebagai letak pagination mau ditengah, kiri, atau kanan. Jadi tinggal ganti saja akhir center menjadi start atau end.