Bootstrap 4 Components

Badges

Badges are small and adaptive tags for categorizing your content. To create a badge element create a span with the class .badge.

Badges scale to match the size of their immediate parent element using relative font sizing and em units.

Example for a Badge New

Example for a Badge Advanced

Example for a Badge Latest

Example for a Badge Original

Example for a Badge Just out!

Example for a Badge Unique

<h1>Example for a Badge <span class="badge badge-dark">New</span></h1>
<h2>Example for a Badge <span class="badge badge-dark">Advanced</span></h2>
<h3>Example for a Badge <span class="badge badge-dark">Latest</span></h3>
<h4>Example for a Badge <span class="badge badge-dark">Original</span></h4>
<h5>Example for a Badge <span class="badge badge-dark">Just out!</span></h5>
<h6>Example for a Badge <span class="badge badge-dark">Unique</span></h6>

Contextual Badges

You can modify the appearance of a badge using modifier classes as below.

Default Primary Success Info Warning Danger

<span class="badge badge-dark">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>

Badge Pill

Add another modifier class.badge-pill to add rounded edges to the badges.