Elements
These modular elements can be readily used and customized across pages and in different blocks.
Badge <> show code
<h1>Example heading <span class="badge badge-default">New</span></h1>
<h2>Example heading <span class="badge badge-default">New</span></h2>
<h3>Example heading <span class="badge badge-default">New</span></h3>
<h4>Example heading <span class="badge badge-default">New</span></h4>
<h5>Example heading <span class="badge badge-default">New</span></h5>
<h6>Example heading <span class="badge badge-default">New</span></h6>
How to use
Small and adaptive tag for adding context to just about any content.
- Use the .badge class with <span> element inside main element.
Example 1
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example 2
Variations <> show code
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<!-- Pill badge -->
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<!-- Link Badge -->
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
How to use variation
- To get prestyled badge just use the .badge-default or .badge-primary or .badge-success or .badge-info or .badge-warning or .badge-danger class with .badge class.