Documentation v1.0.11

Preview Purchase


Craft customizes the Bootstrap Badges  through the SASS variables in src/sass/components/_variables.scssand adds additonal options in src/sass/components/_badge.


Use .badgewith .badge-{color}classes to set a badge's style defined with $theme-colorsmapped in src/sass/components/_variables.scss:
New New New New New New New New New
<span class="badge badge-white">New</span>
<span class="badge badge-primary">New</span>
<span class="badge badge-light">New</span>
<span class="badge badge-secondary">New</span>
<span class="badge badge-success">New</span>
<span class="badge badge-info">New</span>
<span class="badge badge-warning">New</span>
<span class="badge badge-danger">New</span>
<span class="badge badge-dark">New</span>

Light Style

Use .badgewith .badge-light-{color}classes to set a badge's light style defined with $theme-light-colorsmapped in src/sass/components/_variables.scss:
New New New New New New
<span class="badge badge-light-primary">New</span>
<span class="badge badge-light-success">New</span>
<span class="badge badge-light-info">New</span>
<span class="badge badge-light-warning">New</span>
<span class="badge badge-light-danger">New</span>
<span class="badge badge-light-dark">New</span>

Square Badge

Use .badge-squareclass to use a badge with same width and height:
5 5 5 5 5 5 5 5 5
<span class="badge badge-square badge-white">5</span>
<span class="badge badge-square badge-primary">5</span>
<span class="badge badge-square badge-light">5</span>
<span class="badge badge-square badge-secondary">5</span>
<span class="badge badge-square badge-success">5</span>
<span class="badge badge-square badge-info">5</span>
<span class="badge badge-square badge-warning">5</span>
<span class="badge badge-square badge-danger">5</span>
<span class="badge badge-square badge-dark">5</span>

Circle Badge

Use .badge-circleclass to use a badge with circle style:
5 5 5 5 5 5 5 5 5
<span class="badge badge-circle badge-white">5</span>
<span class="badge badge-circle badge-primary">5</span>
<span class="badge badge-circle badge-light">5</span>
<span class="badge badge-circle badge-secondary">5</span>
<span class="badge badge-circle badge-success">5</span>
<span class="badge badge-circle badge-info">5</span>
<span class="badge badge-circle badge-warning">5</span>
<span class="badge badge-circle badge-danger">5</span>
<span class="badge badge-circle badge-dark">5</span>

Bootstrap Buttons

Use a badge with .badge-circleclass in a Bootstrap Button element:
<button class="btn btn-primary position-relative me-5">
    Button <span class="position-absolute top-0 start-0 translate-middle  badge badge-circle badge-danger">5</span>

<button class="btn btn-success position-relative me-5">
    Button <span class="position-absolute top-100 start-0 translate-middle  badge badge-circle badge-warning">5</span>

<button class="btn btn-danger position-relative me-5">
    Button <span class="position-absolute top-0 start-100 translate-middle  badge badge-circle badge-primary">5</span>

<button class="btn btn-warning position-relative">
    Button <span class="position-absolute top-100 start-100 translate-middle  badge badge-circle badge-success">5</span>

Inside Button

Use a badge with .badge-circleclasses inside button:
<button class="btn btn-primary me-5">
    Notifications <span class="badge badge-circle badge-warning ms-2">5</span>

<button class="btn btn-success me-5">
    Messages <span class="badge badge-circle badge-danger ms-2">4</span>

<button class="btn btn-danger me-5">
    Orders <span class="badge badge-circle badge-primary ms-2">4</span>

<button class="btn btn-danger me-5">
    Profile <span class="badge badge-circle badge-white ms-2">3</span>
Learn & Get Inspired

Support at

Join our developers community to find answer to your question and help others. FAQs
Get Support
From guides and how-tos, to live demos and code examples to get started right away.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now