Simple Pagination Pada Bootstrap 4

Simple Pagination Pada Bootstrap 4 – hai ketemu lagi dengan saya dan pada kesempatan kali ini saya akan membahas tentang bootstrap lagi dan pada kesempatan kali ini saya akan membahas tentang pagination. Setiap aplikasi pasti akan menampilkan suatu data dan jika data sangat banyak sangat tidak mungkin untuk menampilkan semua data dalam database sekaligus karena itu akan menjadikan aplikasi menjadi berat. Oleh karena itu kita perlu memisahnya menjadi bentuk pagination. Hal ini akan menjadikan aplikasi sobat lebih ringan.

Sebelum saya contohkan cara membuat pagination pada bootstrap, tentunya kita perlu memasukkan terlebih daulu librari css dari bootsrap seperti contoh dibawah yang dimasukkan pada tag <head>

Untuk contoh saya menggunakan css online namun jika untuk keperluan development sobat perlu mendownloadnya terlebih dahulu atau sobat bisa dowload bersama project ini di akhir postingan. Perlu saya tegaskan di postingan kali ini hanya berisi tentang macam-macam-pagination pada bootstrap jadi bukan menampilkan data dari database menjadi pagination, jika itu yang sobat ingin lihat maka sobat bisa kunjungi artikel dibawah :

 Baca juga :

Cara Membuat Pagination dengan Database MySQL pada PHP

Cara Membuat Pagination Menggunakan Ajax Tanpa Loading pada PHP

 

Berikut adalah macam-macam dari pagination pada Bootstrap :

1. Simple Pagination

Pada jenis ini, pada tombol Next dan Previous munculnya berupa teks, contoh penggunaannya adalah sebagai berikut

Hasilnya :

 

2. Pagination dengan Icon

Kita akan mengubah Next dan Previous menjadi sebuah icon, jika sobat mau maka sobat bisa juga menggantinya dengan icon fontawesome atau lainnya namun pada contoh ini saya menggunakan icon standar, contoh penggunaannya

Hasilnya :

 

3. Pagination dengan class Active

Dengan menggunakan class active kita bisa menamdakan bahwa kita sedang di halaman tersebut. Kita juga bisa memberikan class lawan dari active yaitu .disabled, contoh penggunaannya adalah sebagai berikut

Hasilnya :

 

3. Pagination Size

Bootstrap menyediakan berbagai macam besar dari pagination. Untuk yang standar seperti contoh sebelumnya adalah default yaitu ukuran sedang. Kita juga bisa membuat dengan ukuran besar atau kecil, contohnya yaitu

Hasilnya :

 

4. pagination Position Center

Untuk default posisi pagination ada di sebelah kiri namun kita juga bisa membuatnya ada di tengah, caranya yaitu

Hasilnya :

 

5. Pagination Position Right

Jika kita bisa menampilkan pagination di kiri dan di tengah tentunya kita juga bisa menampilkan di sebelah kanan, caranya yaitu

Hasilnya :

 

Pada contoh diatas hanya membahas tentang macam-macam pagination dan cara menampilkan pagination yang ada pada bootstrap saja. Untuk menampilkan data real dari database akan kita bahas pada postingan saya yang lainnya. Sekina postingan saya tentang Simple Pagination Pada Bootstrap 4. Jika ada salah kata saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah. Kunjungi juga postingan saya lainnya untuk menambah ilmu sobat.

 

Artikel Tentang Bootstrap Lainnya :

Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah

Macam-macam Form Input pada HTML dan Bootstrap

Cara Membuat SweetAlert dan Macam-Macamnya pada PHP

Membuat Bootstrap Modal dan Animasinya pada PHP

Membuat Badges Menggunakan Bootstrap 4

Membuat Alert pada HTML menggunakan Bootstrap 4

Mengenal Bootstrap Typography pada HTML dan Bootstrap 4

Menggunakan Tooltip pada HTML dan Bootstrap 4

Membuat Nested Media Object pada Bootstrap 4

Membuat Navbar dengan Bootstrap 4 dengan Mudah

Membuat Border Menggunakan Bootstrap 4

Membuat Progress Bar dengan Bootstrap 4

 

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

 

2 thoughts on “Simple Pagination Pada Bootstrap 4

Leave a Reply

Your email address will not be published. Required fields are marked *

8 − four =