Tutorial Belajar Bootstrap 4 Part 13 – Membuat Pagination dan Breadcrumb dengan Bootstrap

Selamat datang dalam seri tutorial warung belajar, kita masih membahas mengenai bootstrap 4, jika dalam tutorial sebelumnya kita telah membahas mengenai cara membuat progress bar dengan menggunakan bootstrap, dalam tutorial kali ini kita akan membahas mengenai cara membuat pagination dan breadcrumb dengan bootstrap.

Pagination adalah fitur paging yang biasanya kita temui dalam sebuah tabel yang menampilkan data, dimana datanya akan dibagi menjadi beberapa halaman, nah tugas paging ini untuk membagi data tersebut kedalam beberapa halaman, bootstrap sudah menyiapkan beberapa class yang bisa anda gunakan untuk membuat fitur paging.

Breadcrumb adalah fitur yang terdapat dalam halaman web yang digunakan untuk mempermudah atau membantu pengguna web untuk memahami isi konten web serta sebagai penunjuk hirarki situs web tersebut.

Baik kita akan bahas satu persatu untuk fitur bootstrap 4 yang bisa anda gunakan untuk membuat fitur pagination dan breadcrumb.

 

Cara membuat pagination dengan bootstrap

Untuk membuat fitur pagination dengan bootstrap anda perlu menuliskan beberapa class antara lain :

• tambahkan class .pagination pada tag <ul>
• pada tag <li> yang berada dalam tag <ul> anda tambahkan class .page-item
• pada tag <a> yang berada dalam tag <li> anda tambahkan class .page-link

Contoh penggunaan class bootstrap untuk pagination adalah seperti berikut ini :

Hasilnya adalah seperti berikut :

 

 

Menggunakan Class active untuk menambahkan fitur hightlight pada paging

Class .active digunakan untuk digunakan untuk memberikan hightlight (tanda) pada bagian page yang sedang terbuka, contoh penggunaannya adalah seperti berikut ini :

Hasilnya adalah :

Keterangan :

• pada page ke 2, terdapat hightlight berwarna biru, hal tersebut karena kita menambahkan class .active pada tag <li>

 

 

Menggunakan Class disabled untuk menghilangkan fungsi click pada paging

Selain class .active, anda juga bisa menambahkan class .disabled, yang digunakan untuk menghilangkan (disabled) fungsi click pada fitur paging, untuk contoh penggunaannya adalah sebagai berikut :

Hasilnya adalah :

Keterangan :

• untuk page item dengan tulisan “Previous” tidak bisa di klik, karena kita menggunakan class .disabled dalam class <li>

 

 

Mengatur ukuran pagination

Bootstrap juga menyediakan class yang bisa digunakan untuk mengatur ukuran dari pagination yang dibuat, terdapat 2 class yang bisa anda gunakan antara lain :

• class .pagination-lg untuk ukuran paging lebih besar
• class .pagination-sm untuk ukuran paging yang lebih kecil
• jika anda tidak menambahkan kedua class tersebut maka paging akan ditampilkan dengan ukuran normal

Untuk contohnya adalah sebagai berikut :

Hasilnya adalah sebagai berikut :

Keterangan :

• Paging ke – 1 ukurannya lebih besar karena kita menambahkan class pagination-lg
• Paging ke – 2 ukurannya normal karena kita hanya menggunakan class pagination
• Paging ke -3 ukurannya lebih kecil karena kita menambahkan class pagination-sm

 

 

 

Membuat Breadcrumb dengan bootstrap

Untuk membuat breadcrumb kita masih sama menggunakan tag <ul> dan <li>, kita hanya akan menambahkan beberapa class yang digunakan untuk membuat breadcrumb dengan bootstrap, classnya antara lain :

• Tambahkan class .breadcrumb dalam tag <ul>
• berikutnya didalam tag <ul> silahkan tambahkan tag <li> untuk menuliskan hirarki dari breadcumb lalu tambahkan class .breadcrumb-item

Contoh Penggunaan dari class breadcrumb adalah :

Hasilnya adalah :

Keterangan :

• Breadcrumb akan ditampilkan, karena kita menambahkan class .breadcrumb pada bagian tag <ul> dan class .breadcrumb-item pada class <li>

 

Baik sekian dulu teman – teman pembahasan mengenai cara membuat pagination dan breadcrumb dengan bootstrap, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa di tutorial bootstrap  selanjutnya.