<article class="meteredContent">
<div class="l">
<div class="l">
<section>
<div>
<div class="ez fa fb fc fd">
<div class="ab ca">
<div class="ch bg dx dy dz ea">
<div style="box-sizing: border-box; pointer-events: auto;">Contextual variations</div>
<h2 id="contextual-variations" style="box-sizing: border-box; margin-top: 3rem; margin-bottom: 0.5rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-weight: 500; line-height: 1.2; color: #212529; font-size: 2rem; pointer-events: none; background-color: #ffffff;"></h2>
<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; max-width: 80%; color: #212529; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; font-weight: 400; background-color: #ffffff;">Bootstrap documentation : https://getbootstrap.com/docs/4.0/components/badge/<br /><br />Add any of the below mentioned modifier classes to change the appearance of a badge.</p>
<div class="bd-example" style="box-sizing: border-box; position: relative; padding: 1.5rem; margin: 1rem 0px 0px; border: 0.2rem solid #f7f7f9; color: #212529; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; font-weight: 400; background-color: #ffffff;"><span class="badge badge-primary" style="box-sizing: border-box; display: inline-block; padding: 0.25em 0.4em; font-size: 12px; font-weight: bold; line-height: 1; text-align: center; text-wrap: nowrap; vertical-align: baseline; border-radius: 0.25rem; color: #ffffff; background-color: #007bff;">Primary</span>&nbsp;<span class="badge badge-secondary" style="box-sizing: border-box; display: inline-block; padding: 0.25em 0.4em; font-size: 12px; font-weight: bold; line-height: 1; text-align: center; text-wrap: nowrap; vertical-align: baseline; border-radius: 0.25rem; color: #ffffff; background-color: #6c757d;">Secondary</span>&nbsp;<span class="badge badge-success" style="box-sizing: border-box; display: inline-block; padding: 0.25em 0.4em; font-size: 12px; font-weight: bold; line-height: 1; text-align: center; text-wrap: nowrap; vertical-align: baseline; border-radius: 0.25rem; color: #ffffff; background-color: #28a745;">Success</span>&nbsp;<span class="badge badge-danger" style="box-sizing: border-box; display: inline-block; padding: 0.25em 0.4em; font-size: 12px; font-weight: bold; line-height: 1; text-align: center; text-wrap: nowrap; vertical-align: baseline; border-radius: 0.25rem; color: #ffffff; background-color: #dc3545;">Danger</span>&nbsp;<span class="badge badge-warning" style="box-sizing: border-box; display: inline-block; padding: 0.25em 0.4em; font-size: 12px; font-weight: bold; line-height: 1; text-align: center; text-wrap: nowrap; vertical-align: baseline; border-radius: 0.25rem; background-color: #ffc107;">Warning</span>&nbsp;<span class="badge badge-info" style="box-sizing: border-box; display: inline-block; padding: 0.25em 0.4em; font-size: 12px; font-weight: bold; line-height: 1; text-align: center; text-wrap: nowrap; vertical-align: baseline; border-radius: 0.25rem; color: #ffffff; background-color: #17a2b8;">Info</span>&nbsp;<span class="badge badge-light" style="box-sizing: border-box; display: inline-block; padding: 0.25em 0.4em; font-size: 12px; font-weight: bold; line-height: 1; text-align: center; text-wrap: nowrap; vertical-align: baseline; border-radius: 0.25rem; background-color: #f8f9fa;">Light</span>&nbsp;<span class="badge badge-dark" style="box-sizing: border-box; display: inline-block; padding: 0.25em 0.4em; font-size: 12px; font-weight: bold; line-height: 1; text-align: center; text-wrap: nowrap; vertical-align: baseline; border-radius: 0.25rem; color: #ffffff; background-color: #343a40;">Dark</span></div>
<div class="bd-clipboard" style="box-sizing: border-box; position: relative; float: right; color: #212529; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; font-weight: 400; background-color: #ffffff;"><button class="btn-clipboard" style="border-radius: 0.25rem; margin: 0px; font-family: inherit; font-size: 12px; line-height: inherit; overflow: visible; appearance: button; position: absolute; top: 0.5rem; right: 0.5rem; z-index: 10; display: block; padding: 0.25rem 0.5rem; color: #818a91; cursor: pointer; border: 0px initial initial;" title="" data-original-title="Copy to clipboard">Copy</button></div>
<div class="highlight" style="box-sizing: border-box; padding: 1.5rem; margin: 0px 0px 1rem; background-color: #f7f7f9; color: #212529; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; font-weight: 400;">
<pre style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; margin-top: 0px; margin-bottom: 0px; overflow: auto; padding: 0px; background-color: transparent; border: 0px;"><code class="language-html" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: inherit; color: #212529;" data-lang="html"><span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;span</span> <span class="na" style="box-sizing: border-box; color: #4f9fcf;">class=</span><span class="s" style="box-sizing: border-box; color: #d44950;">"badge badge-primary"</span><span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&gt;</span>Primary<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;/span&gt;</span>
<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;span</span> <span class="na" style="box-sizing: border-box; color: #4f9fcf;">class=</span><span class="s" style="box-sizing: border-box; color: #d44950;">"badge badge-secondary"</span><span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&gt;</span>Secondary<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;/span&gt;</span>
<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;span</span> <span class="na" style="box-sizing: border-box; color: #4f9fcf;">class=</span><span class="s" style="box-sizing: border-box; color: #d44950;">"badge badge-success"</span><span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&gt;</span>Success<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;/span&gt;</span>
<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;span</span> <span class="na" style="box-sizing: border-box; color: #4f9fcf;">class=</span><span class="s" style="box-sizing: border-box; color: #d44950;">"badge badge-danger"</span><span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&gt;</span>Danger<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;/span&gt;</span>
<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;span</span> <span class="na" style="box-sizing: border-box; color: #4f9fcf;">class=</span><span class="s" style="box-sizing: border-box; color: #d44950;">"badge badge-warning"</span><span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&gt;</span>Warning<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;/span&gt;</span>
<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;span</span> <span class="na" style="box-sizing: border-box; color: #4f9fcf;">class=</span><span class="s" style="box-sizing: border-box; color: #d44950;">"badge badge-info"</span><span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&gt;</span>Info<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;/span&gt;</span>
<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;span</span> <span class="na" style="box-sizing: border-box; color: #4f9fcf;">class=</span><span class="s" style="box-sizing: border-box; color: #d44950;">"badge badge-light"</span><span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&gt;</span>Light<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;/span&gt;</span>
<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;span</span> <span class="na" style="box-sizing: border-box; color: #4f9fcf;">class=</span><span class="s" style="box-sizing: border-box; color: #d44950;">"badge badge-dark"</span><span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&gt;</span>Dark<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;/span&gt;</span></code></pre>
</div>
<h1 id="8f31" class="mi mj fg be ld mk ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne bj" data-selectable-paragraph=""></h1>
<h5 id="conveying-meaning-to-assistive-technologies" style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5rem; font-family: inherit; font-weight: 500; line-height: 1.2; color: inherit; font-size: 1.25rem;">Conveying meaning to assistive technologies</h5>
<div class="bd-callout bd-callout-warning" style="box-sizing: border-box; padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; border-width: 1px 1px 1px 0.25rem; border-style: solid; border-color: #eeeeee #eeeeee #eeeeee #f0ad4e; border-image: initial; border-radius: 0.25rem; color: #212529; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; font-weight: 400; background-color: #ffffff;">
<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0px;">Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies &ndash; such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the&nbsp;<code class="highlighter-rouge" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; color: #e83e8c; word-break: break-word; border-radius: 0.25rem;">.sr-only</code>&nbsp;class.</p>
</div>
<div style="box-sizing: border-box; pointer-events: auto;">Pill badges</div>
<h2 id="pill-badges" style="box-sizing: border-box; margin-top: 3rem; margin-bottom: 0.5rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-weight: 500; line-height: 1.2; color: #212529; font-size: 2rem; pointer-events: none; background-color: #ffffff;"></h2>
<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; max-width: 80%; color: #212529; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; font-weight: 400; background-color: #ffffff;">Use the&nbsp;<code class="highlighter-rouge" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; color: #e83e8c; word-break: break-word;">.badge-pill</code>&nbsp;modifier class to make badges more rounded (with a larger&nbsp;<code class="highlighter-rouge" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; color: #e83e8c; word-break: break-word;">border-radius</code>&nbsp;and additional horizontal&nbsp;<code class="highlighter-rouge" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; color: #e83e8c; word-break: break-word;">padding</code>). Useful if you miss the badges from v3.</p>
<div class="bd-example" style="box-sizing: border-box; position: relative; padding: 1.5rem; margin: 1rem 0px 0px; border: 0.2rem solid #f7f7f9; color: #212529; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; font-weight: 400; background-color: #ffffff;"><span class="badge badge-pill badge-primary" style="box-sizing: border-box; display: inline-block; padding: 0.25em 0.6em; font-size: 12px; font-weight: bold; line-height: 1; text-align: center; text-wrap: nowrap; vertical-align: baseline; border-radius: 10rem; color: #ffffff; background-color: #007bff;">Primary</span>&nbsp;<span class="badge badge-pill badge-secondary" style="box-sizing: border-box; display: inline-block; padding: 0.25em 0.6em; font-size: 12px; font-weight: bold; line-height: 1; text-align: center; text-wrap: nowrap; vertical-align: baseline; border-radius: 10rem; color: #ffffff; background-color: #6c757d;">Secondary</span>&nbsp;<span class="badge badge-pill badge-success" style="box-sizing: border-box; display: inline-block; padding: 0.25em 0.6em; font-size: 12px; font-weight: bold; line-height: 1; text-align: center; text-wrap: nowrap; vertical-align: baseline; border-radius: 10rem; color: #ffffff; background-color: #28a745;">Success</span>&nbsp;<span class="badge badge-pill badge-danger" style="box-sizing: border-box; display: inline-block; padding: 0.25em 0.6em; font-size: 12px; font-weight: bold; line-height: 1; text-align: center; text-wrap: nowrap; vertical-align: baseline; border-radius: 10rem; color: #ffffff; background-color: #dc3545;">Danger</span>&nbsp;<span class="badge badge-pill badge-warning" style="box-sizing: border-box; display: inline-block; padding: 0.25em 0.6em; font-size: 12px; font-weight: bold; line-height: 1; text-align: center; text-wrap: nowrap; vertical-align: baseline; border-radius: 10rem; background-color: #ffc107;">Warning</span>&nbsp;<span class="badge badge-pill badge-info" style="box-sizing: border-box; display: inline-block; padding: 0.25em 0.6em; font-size: 12px; font-weight: bold; line-height: 1; text-align: center; text-wrap: nowrap; vertical-align: baseline; border-radius: 10rem; color: #ffffff; background-color: #17a2b8;">Info</span>&nbsp;<span class="badge badge-pill badge-light" style="box-sizing: border-box; display: inline-block; padding: 0.25em 0.6em; font-size: 12px; font-weight: bold; line-height: 1; text-align: center; text-wrap: nowrap; vertical-align: baseline; border-radius: 10rem; background-color: #f8f9fa;">Light</span>&nbsp;<span class="badge badge-pill badge-dark" style="box-sizing: border-box; display: inline-block; padding: 0.25em 0.6em; font-size: 12px; font-weight: bold; line-height: 1; text-align: center; text-wrap: nowrap; vertical-align: baseline; border-radius: 10rem; color: #ffffff; background-color: #343a40;">Dark</span></div>
<div class="bd-clipboard" style="box-sizing: border-box; position: relative; float: right; color: #212529; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; font-weight: 400; background-color: #ffffff;"><button class="btn-clipboard" style="border-radius: 0.25rem; margin: 0px; font-family: inherit; font-size: 12px; line-height: inherit; overflow: visible; appearance: button; position: absolute; top: 0.5rem; right: 0.5rem; z-index: 10; display: block; padding: 0.25rem 0.5rem; color: #818a91; cursor: pointer; border: 0px initial initial;" title="" data-original-title="Copy to clipboard">Copy</button></div>
<div class="highlight" style="box-sizing: border-box; padding: 1.5rem; margin: 0px 0px 1rem; background-color: #f7f7f9; color: #212529; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; font-weight: 400;">
<pre style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 14px; margin-top: 0px; margin-bottom: 0px; overflow: auto; padding: 0px; background-color: transparent; border: 0px;"><code class="language-html" style="box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: inherit; color: #212529;" data-lang="html"><span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;span</span> <span class="na" style="box-sizing: border-box; color: #4f9fcf;">class=</span><span class="s" style="box-sizing: border-box; color: #d44950;">"badge badge-pill badge-primary"</span><span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&gt;</span>Primary<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;/span&gt;</span>
<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;span</span> <span class="na" style="box-sizing: border-box; color: #4f9fcf;">class=</span><span class="s" style="box-sizing: border-box; color: #d44950;">"badge badge-pill badge-secondary"</span><span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&gt;</span>Secondary<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;/span&gt;</span>
<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;span</span> <span class="na" style="box-sizing: border-box; color: #4f9fcf;">class=</span><span class="s" style="box-sizing: border-box; color: #d44950;">"badge badge-pill badge-success"</span><span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&gt;</span>Success<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;/span&gt;</span>
<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;span</span> <span class="na" style="box-sizing: border-box; color: #4f9fcf;">class=</span><span class="s" style="box-sizing: border-box; color: #d44950;">"badge badge-pill badge-danger"</span><span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&gt;</span>Danger<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;/span&gt;</span>
<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;span</span> <span class="na" style="box-sizing: border-box; color: #4f9fcf;">class=</span><span class="s" style="box-sizing: border-box; color: #d44950;">"badge badge-pill badge-warning"</span><span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&gt;</span>Warning<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;/span&gt;</span>
<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;span</span> <span class="na" style="box-sizing: border-box; color: #4f9fcf;">class=</span><span class="s" style="box-sizing: border-box; color: #d44950;">"badge badge-pill badge-info"</span><span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&gt;</span>Info<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;/span&gt;</span>
<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;span</span> <span class="na" style="box-sizing: border-box; color: #4f9fcf;">class=</span><span class="s" style="box-sizing: border-box; color: #d44950;">"badge badge-pill badge-light"</span><span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&gt;</span>Light<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;/span&gt;</span>
<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;span</span> <span class="na" style="box-sizing: border-box; color: #4f9fcf;">class=</span><span class="s" style="box-sizing: border-box; color: #d44950;">"badge badge-pill badge-dark"</span><span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&gt;</span>Dark<span class="nt" style="box-sizing: border-box; color: #2f6f9f;">&lt;/span&gt;</span></code></pre>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</article>