Tutorial Bootstrap 4 #28 : Pagination Bootstrap 4

Pagination Bootstrap 4 – Selamat datang di tutorial bootstrap 4 bagian ke dua puluh depalapan. Pada tutorial ini kita akan dijelaskan tentang cara membuat komponen pagination dengan menggunakan class-class yang sudah disediakan di bootstrap 4.

Pagination Bootstrap 4

Seperti yang sudah teman-teman ketahui atau belum, Pagination merupakan sebuah komponen website yang terdiri dari penomoran halaman website.

Misal jika teman-teman membuka sebuah website, dan melihat ada beberapa postingan artikel di sana, pada bagian bawahnya biasanya terdapat penomoran halaman. penomoran halaman tersebut di sebut dengan paging atau pagination.

Pagination sendiri dibuat dengan tujuan untuk membatasi data yang tampil pada sebuah halaman website, sehingga jika ada 100 buah data, maka seluruh data tersebut tidak tampil sekaligus yang akan membuat data tampil dengan sangat memanjang.

Oleh sebab itu pagination bertugas untuk membatasi tampilnya data. misalkan pada halaman 1 ditampilkan data dari 1 sampai 10, kemudian dihalaman kedua ditampilkan data 11 sampai 20, begitu juga seterusnya sampai halaman-halaman berikutnya tergantung berapa jumlah data yang ada.

Namun pada kesempatan ini kita tidak membahas masalah teknis dari pembuatan paginationnya, melainkan membahas cara membuat design penomoran pagination dengan menggunakan bootstrap 4.

Baca juga cara membuat pagination dengan PHP dan MySQL.

Membuat Pagination Sederhana Dengan Bootstrap 4

Bootstrap 4 sudah menyediakan class-class yang bisa kita gunakan untuk membuat pagination dengan mudah dan cepat. apa saja class nya? dan bagaimana hasil pagination yang dibuat dengan menggunakan bootstrap ? silahkan perhatikan contoh membuat pagination dengan bootstrap berikut.

Saya anggap teman-teman sudah bisa cara menghubungkan project nya dengan bootstrap 4, jika belum silahkan baca tutorial sebelumnya tentang cara menggunakan bootstrap 4.

pagination.html

Nah, perhatikan contoh pagination sederhana di atas.

Syntax di atas adalah contoh dari pagination yang kita buat dengan menggunakan bootstrap 4. pertama buat class .pagination dalam elemen <ul> .. </ul>. kemudoan dalam elemen <li> .. </li> nya buat class .page-item. selanjutnya dibagian link penomoran halamannya atau pada elemen <a> .. </a>, buat class .page-link.

kemudian ada 2 opsi class yang bisa kita gunakan juga yaitu class .disabled untuk membuat link yang tidak aktif, kemudian class .active untuk membuat link aktif.

Pada contoh ini class .disabled kita letakkan pada tombol sebelumnya, agar tombol ini seolah-olah tidak aktif.

Kemudian class .active kita letakkan pada penomoran halaman 2.

Dan jika dijalankan, maka hasilnya akan seperti berikut.

Pagination Bootstrap 4

Sampai di sini kita telah selesai membuat pagination dengan bootstrap 4. cukup mudah bukan ?

Kita juga bisa mengubah ukuran pagination, atau mengubah posisinya.

Pengaturan Ukuran Pagination

Untuk mengubah ukuran pagination, kita tinggal menambahkan class .pagination-lg untuk membuat pagination yang berukuran besar.

Dan gunakan class .pagination-sm untuk membuat pagination yang berukuran kecil.

Class .pagination-sm atau .pagination-lg bisa kita letakkan beriringan dengan class .pagination.

Perhatikan contoh berikut.

Maka hasilnya akan seperti berikut.

ukuran pagination

Oke cara mengubah ukuran pagination bootstrap selesai.

Tapi bagaimana jika kita ingin membuat posisi pagination ini berada di tengah ? atau di kanan? caranya mudah. silahkan perhatikan penjelasan berikut.

Pengaturan Posisi Pagination

Jika teman-teman ingin membuat posisi pagination berada ditengah, teman-teman bisa menambahkan class .justify-content-center.

Atau jika teman-teman ingin membuat posisi pagination berada di kanan, teman-teman bisa menambahkan class .justify-content-end.

Letakkan salah satu dari class tersebut beriringan dengan class .pagination yang sudah kita bahas sebelumnya.

Jalankan dan hasilnya seperti berikut. pagination akan pindah ke sebelah kanan, dan ditengah.

posisi pagination

Oke selesai sudah Tutorial Bootstrap 4 #28 : Pagination Bootstrap 4. pada tutorial ini kita sudah belajar cara membuat pagination dengan mudah dan cepat.

Kita juga telah belajar cara mengubah ukuran dari pagination dan mengubah posisi dari pagination.

Jika teman-teman ingin membaca tutorial pagination dari situs bootstrap sendiri, Teman-teman bisa baca di https://getbootstrap.com/docs/4.3/components/pagination/.

Hasil dan seluruh source code dari tutorial ini bisa teman-teman lihat dan download pada link berikut.

DEMO

Download Source Code