Live Preview

Badges

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

Bootstrap documentation →

Examples

Primary badge Secondary badge Success badge Danger badge Warning badge Info badge Light badge Dark badge

Sizes

Use badge sizing via class on badge-* xl, lg, sm, xs

Badge: xl Badge: lg Badge Badge: sm Badge: xs

Circle

Turn any badge into a circle with a .badge-circle modifier.

5 5 
                    
                        <span class="badge badge-circle badge-xl bg-primary">
                            @@include("../../img/icons/sliders.svg")
                        </span>

                        <span class="badge badge-circle badge-xl bg-soft-primary text-primary">
                            @@include("../../img/icons/sliders.svg")
                        </span>

                        <span class="badge badge-circle badge-lg bg-primary">
                            <span>5</span>
                        </span>

                        <span class="badge badge-circle badge-lg bg-soft-primary text-primary">
                            <span>5</span>
                        </span>