Bootstrap Badges
Bootstrap 4 badges are small count/status indicators. Bootstrap 3 used a separate label component; Bootstrap 4 standardizes this use case around badges.
Badge Styles Top ↑
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
Pill Badge Top ↑
<span class="badge badge-primary badge-pill">52</span>
Badge inside a Button Top ↑
<button class="btn btn-primary">
Notifications
<span class="badge badge-light">4</span>
</button>
Badge generator → · Legacy Bootstrap 3 label generator
Original Source Examples Retained for Migration Reference Top ↑
These original examples are preserved so no learner-purpose code is silently dropped. The current examples above are the recommended implementation for this page.
Original example 1
<a href='#'>Inbox <span class='badge'>42</span></a>Original example 2
<button type='button' class='btn btn-info btn-xs'>button class='btn btn-success btn-xs' <span class='badge'>62</span></button>Original example 3
<span class='label label-default'>Default </span>
<span class='label label-primary'>Primary </span>
<span class='label label-success'>Success </span>
<span class='label label-info'>Info </span>
<span class='label label-warning'>Warning </span>
<span class='label label-danger'>Danger </span>Additional Original Learning Routes Top ↑
Continue Learning jQuery
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
Connect:
This article is written by plus2net.com team.
