<pre class="language-javascript"><code>class="badge rounded-pill bg-dark m-2 px-2 d-inline-flex align-items-center justify-content-center"</code></pre>
<div class="table-responsive">
<table style="border-collapse: collapse; width: 138.721%; height: 614.719px; border-width: 0px; border-style: solid;" border="1"><colgroup><col style="width: 21.5807%;"><col style="width: 78.4201%;"></colgroup>
<tbody>
<tr style="height: 100.719px;">
<th style="height: 100.719px; border-width: 0px;">
<p style="text-align: left;"><strong>Bootstrap Class</strong></p>
</th>
<th style="height: 100.719px; border-width: 0px;">
<p style="text-align: center;"><strong>Effect</strong></p>
</th>
</tr>
<tr style="height: 63px;">
<td style="height: 63px; border-width: 0px;"><code>badge</code></td>
<td style="height: 63px; border-width: 0px; vertical-align: middle;">
<pre class="language-javascript"><code>by default styles an HTML element to create a small status or notification element</code></pre>
</td>
</tr>
<tr style="height: 63px;">
<td style="border-width: 0px; height: 63px;"><code>rounded-pill</code></td>
<td style="border-width: 0px; vertical-align: middle; height: 63px;">
<pre class="language-javascript"><code>(optional) rounds the corners of the element to give it a pill-like shape. </code></pre>
</td>
</tr>
<tr style="height: 63px;">
<td style="border-width: 0px; height: 63px;"><code>bg-dark</code></td>
<td style="border-width: 0px; vertical-align: middle; height: 63px;">
<pre class="language-javascript"><code>(optional) sets the background color of the element to a dark shade.</code></pre>
</td>
</tr>
<tr style="height: 63px;">
<td style="border-width: 0px; height: 63px;"><code>m-2</code></td>
<td style="border-width: 0px; vertical-align: middle; height: 63px;">
<pre class="language-javascript"><code>(optional) sets the margin around the element to 2 units defined in Bootstrap</code></pre>
</td>
</tr>
<tr style="height: 63px;">
<td style="border-width: 0px; height: 63px;"><code>px-2</code></td>
<td style="border-width: 0px; vertical-align: middle; height: 63px;">
<pre class="language-javascript"><code>sets the horizontal padding of the element to 2 units defined in Bootstrap</code></pre>
</td>
</tr>
<tr style="height: 63px;">
<td style="border-width: 0px; height: 63px;"><code>d-inline-flex</code></td>
<td style="border-width: 0px; vertical-align: middle; height: 63px;">
<pre class="language-javascript"><code>sets the display property of the element to "inline-flex"</code></pre>
</td>
</tr>
<tr style="height: 63px;">
<td style="border-width: 0px; height: 63px;"><code>align-items-center</code></td>
<td style="border-width: 0px; vertical-align: middle; height: 63px;">
<pre class="language-javascript"><code>aligns the items along the vertical axis to the center using flexbox</code></pre>
</td>
</tr>
<tr style="height: 63px;">
<td style="border-width: 0px; height: 63px;"><code>justify-content-center</code></td>
<td style="border-width: 0px; vertical-align: middle; height: 63px;">
<pre class="language-javascript"><code>aligns the items along the horizontal axis to the center using flexbox</code></pre>
</td>
</tr>
<tr style="height: 10px;">
<td style="border-width: 0px; height: 10px;">&nbsp;</td>
<td style="border-width: 0px; vertical-align: middle; height: 10px;">&nbsp;</td>
</tr>
</tbody>
</table>
</div>
<p>&nbsp;</p>
<p>Use either&nbsp;<a href="https://icons.getbootstrap.com/" target="_blank" rel="noopener">Bootstrap icon</a> classes or classes from any other icon library that is an icon of a circle with an "x" inside.</p>
<pre class="language-javascript"><code>html &lt;i class="bi bi-x-circle-fill fs-6 ms-2" role="button"&gt;&lt;/i&gt;</code></pre>
<p><code>html</code>&nbsp;is a plain text, indicating the text of the badge.</p>
<p><code>role="button"</code>&nbsp;is an <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA" target="_blank" rel="noopener">ARIA</a> attribute that indicates that the <code>&lt;i&gt;</code> element has a role of a button. Therefore when you hover over the <code>&lt;i&gt;</code> element, the default cursor changes to a pointer that typically looks like a pointing hand indicating the element can be clicked.</p>