Badge

All modular elements can be readily used and customized in every layout across pages.

For detail documentation, View Badge on Bootstrap⟶

Default Badges

Default

Primary

Secondary

Success

Info

Warning

Danger

<div class="badge badge-default">Default</div>
<div class="badge text-bg-primary"> Primary</div>
<div class="badge text-bg-secondary"> Secondary</div>
<div class="badge text-bg-success"> Success</div>
<div class="badge text-bg-info"> Info</div>
<div class="badge text-bg-warning"> Warning</div>
<div class="badge text-bg-danger"> Danger</div>

Pill Badges

Default

Primary

Secondary

Success

Info

Warning

Danger

<div class="badge badge-default rounded-pill">Default</div>
<div class="badge rounded-pill text-bg-primary">Primary</div>
<div class="badge rounded-pill text-bg-secondary">Secondary</div>
<div class="badge rounded-pill text-bg-success">Success</div>
<div class="badge rounded-pill text-bg-info">Info</div>
<div class="badge rounded-pill text-bg-warning">Warning</div>
<div class="badge rounded-pill text-bg-danger">Danger</div>