Bootstrap 3 Badges - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Badges (Lencana)

Badge atau Lencana adalah indikator numerik.

Dengan Bootstrap kita dapat membuat badge atau lencana dengan mudah contohnya memberikan notifikasi kepada user seperti jumlah pesan yang diterima atau belum dibaca, jumlah permintaan teman, jumlah kategory, dll.

Cara Penerapan :

Untuk penerapannya silahkan lihat contoh berikut :

<span class="badge">10</span>

Contoh 1 :

<a href="#">Kotak Masuk <span class="badge">10</span></a>

<button class="btn btn-primary" type="button">
  Pesan <span class="badge">40</span>
</button>

Contoh 2 :

<a href="#" class="btn btn-default">
 Kategory 1 <span class="badge">10</span>
</a>

<a href="#" class="btn btn-info">
 Kategory 2 <span class="badge">30</span>
</a>

<a href="#" class="btn btn-danger">
 Kategory 3 <span class="badge">16</span>
</a>

<a href="#" class="btn btn-success">
 Kategory 4 <span class="badge">86</span>
</a>

Contoh 3 :

<ul class="nav nav-pills">
  <li><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li class="active"><a href="#">Pesan <span class="badge">70</span></a></li>
  <li><a href="#">Pemberitahuan  <span class="badge">25</span></a></li>
</ul>