Badges

Documentation and examples for badges, our small count and labeling component.

Examples

Primary Secondary Success Danger Warning Info Light Dark

Example


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

Pill badges

Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.

Primary Secondary Success Danger Warning Info Light Dark

Example


<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>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.

Primary Secondary Success Danger Warning Info Light Dark

Example


<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>

Size

Use .badge-md or .badge-lg modifier classes in order to alter the badge's size from normal to medium to large.

Normal Medium Large Normal Medium Large

Example


<span class="badge badge-primary">Normal</span>
<span class="badge badge-md badge-primary">Medium</span>
<span class="badge badge-lg badge-primary">Large</span>

<span class="delimiter"></span>

<span class="badge badge-pill badge-success">Normal</span>
<span class="badge badge-md badge-pill badge-success">Medium</span>
<span class="badge badge-lg badge-pill badge-success">Large</span>

Inline with text

Use .badge-md or .badge-lg modifier classes in order to alter the badge's size from normal to medium to large.

New Lorem ipsum dolor sit amet consectetur adipiscing.
Hot Lorem ipsum dolor sit amet consectetur adipiscing.

Example


<div class="">
    <span class="badge badge-inline badge-pill bg-base-1">New</span>
    <span>Lorem ipsum dolor sit amet consectetur adipiscing.</span>
</div>

Overlay badges

Use this badge style for absolute positioning on top of elements. You can use any of the pre-defined colors.

Left
Right

Example


<div class="row">
    <div class="col-md-4">
        <div class="relative">
            <img src="path_to_image" class="img-fluid rounded">
            <span class="block-ribbon block-ribbon-fixed block-ribbon-left bg-blue">Left</span>
        </div>
    </div>
    <div class="col-md-4">
        <div class="relative">
            <img src="path_to_image" class="img-fluid rounded">
            <span class="block-ribbon block-ribbon-fixed block-ribbon-right bg-green">Right</span>
        </div>
    </div>
</div>

Cornered badges

Use this badge style for absolute positioning on top of elements. You can use any of the pre-defined colors.

Example


<div class="row">
    <div class="col-md-4">
        <div class="relative">
            <img src="path_to_image" class="img-fluid">
            <a href="#" class="badge-corner">
                <span class="fa fa-heart"></span>
            </a>
        </div>
    </div>
    <div class="col-md-4">
        <div class="relative">
            <img src="path_to_image" class="img-fluid">
            <a href="#" class="badge-corner badge-corner-blue">
                <span class="fa fa-heart"></span>
            </a>
        </div>
    </div>
    <div class="col-md-4">
        <div class="relative">
            <img src="path_to_image" class="img-fluid">
            <a href="#" class="badge-corner badge-corner-green">
                <span class="fa fa-heart"></span>
            </a>
        </div>
    </div>
</div>