Badges

Badges
Basic badge styling
Default badge Default Default badge styling. To use, add .badge-default to the base .badge class
Primary badge Primary Primary contextual alternative. To use, add .badge-primary to the base .badge class
Danger badge Danger Danger contextual alternative. To use, add .badge-danger to the base .badge class
Success badge Success Success contextual alternative. To use, add .badge-success to the base .badge class
Warning badge Warning Warning contextual alternative. To use, add .badge-warning to the base .badge class
Info badge Info Info contextual alternative. To use, add .badge-info to the base .badge class
Custom badge color Purple Add one of available custom background colors. To use, add .bg-* color class to the .badge element
Basic badge options
Rounded badge Rounded badge badge with rounded corners. To use, add .badge-rounded class to the .badge element
Roundless badge Roundless badge This badge doesn't have rounded borders. To use, add .badge-roundless class to the .badge element
Block badge Block badge This badge fills 100% width of a parent element. To use, add .badge-block class to the .badge element
Linked badge Linked badge You can also use badges as a link in an <a> element
Icon in badge badge with icon. To use, add icon and .badge-icon class to the badge. Available in 5 sizes
Icon in linked badge Linked badge with icon. To use, add icon and .badge-icon to the link
Icon in rounded badge Rounded linked icon. Usage is the same, but with additional .badge-rounded class
Icon in linked rounded badge The same as above, but inside link element
Flat badges
Default badge 63 Flat badge in default style. To use with grey color classes and .badge-flat class
Primary badge 59 Primary contextual alternative. To use with primary color classes and .badge-flat class
Danger badge 83 Danger contextual alternative. To use with danger color classes and .badge-flat class
Success badge 93 Success contextual alternative. To use with success color classes and .badge-flat class
Warning badge 38 Warning contextual alternative. To use with warning color classes and .badge-flat class
Info badge 67 Info contextual alternative. To use with info color classes and .badge-flat class
Custom badge color 43 To use custom border and text colors, add border-* and text-* color classes to the badge element
Badge Pills
Basic badges
Default badge pill 78 Basic badge. To use, add .bagde-pill.badge-default to the badge element
Primary badge pill 32 Primary contextual alternative. To use, add .bagde-pill.badge-primary to the badge element
Danger badge pill 34 Danger contextual alternative. To use, add .bagde-pill.badge-danger to the badge element
Success badge pill 65 Success contextual alternative. To use, add .bagde-pill.badge-success to the badge element
Warning badge pill 76 Warning contextual alternative. To use, add .bagde-pill.badge-warning to the badge element
Info badge pill 98 Info contextual alternative. To use, add .bagde-pill.badge-info to the badge element
Custom badge pill color 83 Badge with one of available custom background colors. To use, add .bg-* color class
Basic badge pill options
Linked badge pill 22 Linked badge. Use .badge.bagde-pill and other badge classes in <a> element
Chats
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
chat

Sushi tonight?

10:14 am
chat

Pizza?

We had sushi last time!

For me one Vegetariana! Plus some chili oil on it!

10:15 am
chat

Done. Delivery takes 5 minutes!

10:16 am
chat

Awesome! See you later! : )

Just now