Primary Pill Badges

Use the .badge class, followed by.badge-pill with .badge-primaryclass within element to create primary pill badge.

43

Secondary Pill Badges

Use the .badge class, followed by.badge-pill with .badge-secondaryclass within element to create default pill badge.

59

Success Pill Badges

Use the .badge class, followed by.badge-pill with .badge-successclass within element to create success pill badge.

25

Danger Pill Badges

Use the .badge class, followed by .badge-pill with .badge-dangerclass within element to create danger pill badge.

78

Warning Pill Badges

Use the .badge class, followed by .badge-pill with .badge-warningclass within element to create warning pill badge.

68

Info Pill Badges

Use the .badge class, followed by .badge-pill with .badge-infoclass within element to create info pill badge.

57

Light Pill Badges

Use the .badge class, followed by .badge-pill with .badge-lightclass within element to create light pill badge.

57

Dark Pill Badges

Use the .badge class, followed by .badge-pill with .badge-darkclass within element to create dark pill badge.

57

Custom Blue Grey Color Pill Badges

Use the .badge class, followed by.bg-pinkclass within element to create pink label.

63

Pill Badges With Glow effect

Primary Pill Badges

Use the .badge class, followed by .badge-pill with .badge-glowclass within element to create glow styled pill badge.

41

Secondary Pill Badges

Use the .badge class, followed by .badge-pill with .badge-glowclass within element to create glow styled pill badge.

59

Success Pill Badges

Use the .badge class, followed by .badge-pill with .badge-glowclass within element to create glow styled pill badge.

25

Danger Pill Badges

Use the .badge class, followed by .badge-pill with .badge-glowclass within element to create glow styled pill badge.

78

Warning Pill Badges

Use the .badge class, followed by .badge-pill with .badge-glowclass within element to create glow styled pill badge.

68

Info Pill Badges

Use the .badge class, followed by .badge-pill with .badge-glowclass within element to create glow styled pill badge.

57

Pill Badges with Icons

Primary Icon Pill

Secondary Icon Pill

Success Icon Pill

Square Danger Icon Pill

Square Warning Icon Label

Square Info Icon pill badge

Bordered Pill Badges

Primary Pill Badges

Use the .badge class, followed by.badge-border with .badge-primaryclass within element to create primary pill badge.

43

Success Pill Badges

Use the .badge class, followed by.badge-border with .badge-successclass within element to create success pill badge.

25

Danger Pill Badges

Use the .badge class, followed by .badge-border with .badge-dangerclass within element to create danger pill badge.

78
Navbar Color Options

Layout Options

Sidebar menu Background


Sidebar Background Image
background image
background image
background image
background image

Try Layout Builder