Labels

Add a class u-label u-label-default to make basic label. The margin spacing might be any but for the all labels examples the following margin spacing classes are used g-mr-10 and g-mb-10.

Default Labels

DefaultSuccessInfoWarningDanger
Show code Copy code

Colored Labels

PrimaryLightredDarkredBlueIndigoPurpleDarkpurplePinkOrangeDeeporangeAquaYellowCyanTealBrownBluegrayBlack
Show code Copy code

Rounded Labels

PrimaryLightredDarkredBlueIndigoPurpleDarkpurplePinkOrangeDeeporangeAquaYellowCyanTealBrownBluegrayBlack
Show code Copy code
PrimaryLightredDarkredBlueIndigoPurpleDarkpurplePinkOrangeDeeporangeAquaYellowCyanTealBrownBluegrayBlack
Show code Copy code

Label Sizes

PrimaryLightredDarkredBlueIndigoPurpleDarkpurplePinkOrangeDeeporangeAquaYellowCyanTealBrownBluegrayBlack
Show code Copy code
PrimaryLightredDarkredBlueIndigoPurpleDarkpurplePinkOrangeDeeporangeAquaYellowCyanTealBrownBluegrayBlack
Show code Copy code

Numeric Labels

1234567891011121314151617181920101102103104105106107108109111111112113114115116
Show code Copy code
1234567891011121314151617181920101102103104105106107108109111111112113114115116
Show code Copy code
1234567891011121314151617181920101102103104105106107108109111111112113114115116
Show code Copy code

Labels with Icons

At vero eos et sunt Similique atin culpa Voluptatum deleniti Eleniti boluptatun Sunt at vero et eos Nulla ipsum Dolor sit Amet vero Consectetur Adipiscing Elitut eleifend Fend nisl
Show code Copy code
At vero eos et sunt Similique atin culpa Voluptatum deleniti Eleniti boluptatun Sunt at vero et eos Nulla ipsum Dolor sit Amet vero Consectetur Adipiscing Elitut eleifend Fend nisl
Show code Copy code
At vero eos et sunt Similique atin culpa Voluptatum deleniti Eleniti boluptatun Sunt at vero et eos Nulla ipsum Dolor sit Amet vero Consectetur Adipiscing
Show code Copy code

Different Usages

#First NameUsernameStatus
1Mark@mdoExpiring
2Jacob@fatSuccess
3Larry@twitterError!
4htmlstream@htmlstreamPending
Show code Copy code
Show code Copy code
Show code Copy code

Heading 1 New

Heading 2 New

Heading 3 New

Heading 4 New

Heading 5 New
Heading 6 New
Show code Copy code

Dernières actualités

Contact