Membuat Breadcrumb dengan Bootstrap

Membuat Breadcrumb dengan Bootstrap

—

by

Webbiz.ID
in

Berikut adalah contoh kode untuk membuat breadcrumb 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="breadcrumb">
            <ol class="breadcrumb">
               <li class="breadcrumb-item"><a href="#">Beranda</a></li>
               <li class="breadcrumb-item"><a href="#">Kategori</a></li>
               <li class="breadcrumb-item active" aria-current="page">Judul Artikel</li>
            </ol>
         </nav>
      </div>
   </body>
</html>
HTML
Bootstrap

Pagination


Dengan menggunakan kode di atas, Anda dapat membuat breadcrumb dengan tiga level. Anda dapat mengganti teks “Beranda”, “Kategori”, dan “Produk” dengan teks yang sesuai dengan kebutuhan Anda.

Pastikan Anda telah memasukkan library Bootstrap ke dalam proyek Anda sebelum menggunakan kode di atas. Anda dapat menggunakan versi Bootstrap yang sesuai dengan kebutuhan Anda.

Semoga contoh kode di atas dapat membantu Anda dalam membuat breadcrumb dengan menggunakan Bootstrap.

Artikel Terbaru ⭐