Membuat Pagination (Paginasi) Halaman di Bootstrap 4

Pagination atau Paginasi pada Website berfungsi jika kita memiliki banyak halaman serta kita ingin menambahkan pemisah untuk setiap halaman tersebut. Untuk lebih jelasnya, kalian dapat melihat contoh gambar berikut:

Pagination

Untuk membuat Pagination pada Bootstrap 4, kita dapat menggunakan class .pagination kedalam elemen <ul>. Kemudian tambahkan class .page-item di setiap elemen <li> dan class .page-link di setiap Link yang ada di elemen <li>. Contoh:

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Sebelumnya</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="#">Selanjutnya</a></li>
</ul>

Lihat kode di Github | Lihat Live Demo


Pagination Aktif (Active State)

Pagination Aktif atau Active State Pagination berfungsi untuk memberikan penanda atau Highlight pada halaman yang ditentukan. Untuk membuatnya, kita dapat menambahkan class .active kedalam halaman yang telah kita tentukan. Contoh:

 Pagination Aktif (Active State)

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Sebelumnya</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="#">Selanjutnya</a></li>
</ul>

Lihat kode di Github | Lihat Live Demo

Pagination Disable State

Kita dapat membuat Pagination menjadi Disable (Tidak dapat diklik) pada Bootstrap 4 dengan menggunakan class .disabled. Contoh:

Pagination Disable State

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">Sebelumnya</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="#">Selanjutnya</a></li>
</ul>

Lihat kode di Github | Lihat Live Demo

Ukuran Pagination

Kita juga dapat mengatur ukuran dari Pagination pada Bootstrap 4 menjadi besar atau kecil. Contoh:

Ukuran Pagination

Untuk mengaturnya, kita dapat menggunakan class .pagination-lg untuk Pagination berukuran besar atau class .pagination-sm untuk Pagination yang berukuran kecil. Contoh:

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">Sebelumnya</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="#">Selanjutnya</a></li>
</ul>

<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">Sebelumnya</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="#">Selanjutnya</a></li>
</ul>

Lihat kode di Github | Lihat Live Demo

Perataan Pagination

Kita juga dapat mengatur perataan Pagination menjadi rata kanan, kiri, maupun tengah dengan menggunakan class Utility. Berikut adalah contoh tampilannya:

Perataan Pagination

<!-- Rata Kiri (Left) -->
<ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Sebelumnya</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="#">Selanjutnya</a></li>
</ul>

<!-- Rata Tengah (Center) -->
<ul class="pagination justify-content-center">
    <li class="page-item"><a class="page-link" href="#">Sebelumnya</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="#">Selanjutnya</a></li>
</ul>

<!-- Rata Kanan (Right) -->
<ul class="pagination justify-content-end">
    <li class="page-item"><a class="page-link" href="#">Sebelumnya</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="#">Selanjutnya</a></li>
</ul>

Lihat kode di Github | Lihat Live Demo

Catatan: Kita akan mempelajari Utility atau Helper pada Bootstrap 4 di bagian yang akan datang.

Membuat Breadcrumb di Bootstrap 4

Elemen serupa atau bisa dikatakan dengan pasangan dari Pagination adalah Breadcrumb. Berikut adalah contoh tampilannya:

Membuat Breadcrumb di Bootstrap 4

Class .breadcrumb dan .breadcrumb-item merupakan penanda dari lokasi halaman yang kita tentukan. Contoh:

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Tutorial</a></li>
  <li class="breadcrumb-item"><a href="#">Bootstrap 4</a></li>
  <li class="breadcrumb-item active">Pagination di Bootstrap 4 | EL Creative Academy</li>
</ul> 

Lihat kode di Github | Lihat Live Demo

0 Komentar