Membuat Pagination pada Bootstrap 4

Hallo semuanya, apa kabarnya hari ini? pada tutorial kali ini kita akan belajar tentang bagaimana cara untuk membuat pagination di bootstrap versi terbaru, yaitu versi 4, pagination ini akan menjadi responsive sesuai dengan yang dimiliki oleh bootstrap 4 terbaru ini, selain itu kita juga bisa mengatur peletakan dari pagination tersebut..

Baiklah, kita langsung saja mencoba membuatnya. Pertama kalian bisa buat satu file dengan nama index.html, dan disini saya anggap kalian sudah bisa menyambungkan file HTML dengan file-file yang dimiliki bootstrap.

Jika sudah, kita akan buat struktur pagination seperti berikut

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link active" 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="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">6</a></li>
    <li class="page-item"><a class="page-link" href="#">7</a></li>
    <li class="page-item"><a class="page-link" href="#">8</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Pada pagination tersebut kita bisa juga mengatur tata letak agar pagination berada di kiri, tengah, ataupun kanan. Jika kalian menggunakan kode diata, maka tampilan pagination akan secara default berada di kiri. Jika kalian ingin membuat pagination menjadi ditengah atau di kanan bisa kalian lihat kode berikut.

MEMBUAT PAGINATION DI TENGAH

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</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="#">Next</a>
    </li>
  </ul>
</nav>

 

MEMBUAT PAGINATION DI KANAN

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</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="#">Next</a>
    </li>
  </ul>
</nav>

Penerapan pagination pada bootstrap sangatlah penting, terutama bagi kalian yang memiliki website dengan fitur blog atau berita yang sangat banyak. Baiklah teman teman demikian artikel yang membahas tentang cara membuat pagination pada bootstrap 4

 

DEMO

 

31 Agustus 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat