Membuat Pagination dengan Bootstrap

Membuat Pagination dengan Bootstrap

Berikut adalah contoh kode untuk membuat pagination dengan menggunakan Bootstrap

HTML
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <div class="container mt-3">
         <h4>Pagination</h4>
         <nav aria-label="Page navigation">
            <ul class="pagination">
               <li class="page-item">
                  <a class="page-link" href="#" aria-label="Previous">
                  <span aria-hidden="true">«</span>
                  <span class="sr-only">Previous</span>
                  </a>
               </li>
               <li class="page-item"><a class="page-link" href="#">1</a></li>
               <li class="page-item"><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="#">4</a></li>
               <li class="page-item"><a class="page-link" href="#">5</a></li>
               <li class="page-item">
                  <a class="page-link" href="#" aria-label="Next">
                  <span aria-hidden="true">»</span>
                  <span class="sr-only">Next</span>
                  </a>
               </li>
            </ul>
         </nav>
      </div>
   </body>
</html>
HTML
Bootstrap

Anda dapat menyesuaikan kode ini sesuai dengan kebutuhan Anda. Pastikan Anda telah memasukkan file Bootstrap CSS dan JavaScript yang diperlukan untuk menggunakan komponen ini.

Dengan menggunakan kode di atas, Anda dapat membuat tampilan pagination yang responsif dan mudah digunakan pada halaman web Anda.

Selamat mencoba!

Leave a Reply

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