Membuat Pagination pada Bootstrap 4

31/08/2017    Maykhel David    2470     Website

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

 

Tips dan Trik, Bootstrap, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More