Badges

Default

Primary Success Info Warning Danger Dark

Soft Badge

Primary Success Info Warning Danger Dark

Rounded ( Pill ) Badges

Default

Primary Success Info Warning Danger Dark

Soft Badge

Primary Success Info Warning Danger Dark

Badge with dot

Default

Primary Success Info Warning Danger Dark

Rounded Badge

Primary Success Info Warning Danger Dark

Rounded badges with size

Badges with dot

Small Large Small Large Small Large Small Large

Badge with remove button

Small Large Small Large Small Large Small Large

Badges in Buttons

Badges Position Examples

Badges with Heading

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Example heading Primary

Example heading Success

Example heading Info

Example heading Warning

Example heading Danger

Example heading Dark

TEMPLATE CUSTOMIZER

Set preferences that will be cookies for your live preview demonstration.

Color Scheme

Overall light or dark presentation.

Navigation Position

Select the primary navigation paradigm for your app.

Semi Dark (Sidebar & Header)

Layout Style

Select the primary layout style for your app.

Direction

Select the direction for your app.

Navbar Type

FIxed or Static.

Static Fixed Hidden

Footer Type

FIxed or Static.

Static Fixed Hidden

Menu Hidden

Router Transition

Animation of main content.