Badges

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

Outline

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

Pills

Use .badge-pills class for pills.

Primary
Primary

Classic

Use .badge-classic class for classic.

Primary
Primary

Badges with Heading

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

Example heading Primary

Example heading success

Example heading info

Example heading warning

Example heading danger
Example heading dark
<h1>Example heading <span class="badge badge-primary">Primary</span></h1>
<h2>Example heading <span class="badge badge-success">success</span></h2>
<h3>Example heading <span class="badge badge-info">info</span></h3>
<h4>Example heading <span class="badge badge-warning">warning</span></h4>
<h5>Example heading <span class="badge badge-danger">danger</span></h5>
<h6>Example heading <span class="badge badge-dark">dark</span></h6>

Tags

<input type="text" id="skill-input">

Custom Badges

Person John Doe Person John Doe × 
<button type="button" class="btn btn-primary position-relative mt-3 mb-3 ml-2">
    <span><svg> ... </svg> Facebook</span>
    <span class="badge badge-danger counter">22</span>
</button>

<button type="button" class="btn btn-info position-relative mt-3 mb-3 ml-2">
    <span>Twitter</span>
    <span class="badge badge-danger counter">22</span>
</button>

<button type="button" class="btn btn-secondary position-relative mt-3 mb-3 ml-2">
    <span><svg> ... </svg> </span>
    <span class="badge badge-danger counter">22</span>
</button>

<button type="button" class="btn btn-dark mt-3 mb-3 ml-2">
    Notifications <span class="badge badge-light">4</span>
</button>

<span class="badge-chip badge-warning mt-3 mb-3 ml-2 position-relative">
    <img src="assets/img/profile-small.jpeg" alt="Person" width="96" height="96">
    <span class="text">John Doe</span>
</span>

<span class="badge-chip badge-danger mt-3 mb-3 ml-2">
    <img src="assets/img/profile-small.jpeg" alt="Person" width="96" height="96">
    <span class="text">John Doe</span>
    <span class="closebtn pl-2" onclick="this.parentElement.style.display='none'">×
    </span>
</span>