# Badges Small and adaptive tag for adding context to just about any content.

Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
Learn more about this component on bootstrap's official documentation.

## Badge scaling

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

# Example heading New

## Badge in buttons

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

##### Regular buttons

##### Outline buttons

## Icon badges

Use utility classes with `.btn-icon` to place the badge
9 18 99 100..
16 4 4 99+
4 0 7 4

## Status badges

These badges are unique and triggered by wrapping an element with `.status` class. Comes with two badge sizes `.status-sm` and the default `.status`. Comes in 3 colors, `.status-danger`, `.status-warning`, and `.status-success`

## Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge.
Default
Primary Secondary Success Danger Warning Info Light Dark
Border utility
Primary Secondary Success Danger Warning Info Light Dark

## Pill badges

Use the `.badge-pill` modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding).
Primary Secondary Success Danger Warning Info Light Dark

## Links example

Add `.badge-*` class on a hyperlink element to convert it to actionable badges with hover and focus states
Link Badge - Primary Link Badge - Secondary Link Badge - Success Link Badge - Danger Link Badge - Warning Link Badge - Info Link Badge - Light Link Badge - Dark

## Nested badge

Use the included color utilities to change background and text colors. Below are examples of nested badge with different background colors
Nested Badge 1 Nested Badge 2 99+

## Badge header

We use `.badge-icon` with a combination of other utility classes to create a link badge. This class will auto turncate overflow giving you a nice clean look without any hassle
I am a large text 9999
I am smaller text 9999
I am normal text 9999
11 17 11 17

- Home
- Inbox
- Add More

Tracey Chang
IT Director

- Tracey Chang Online
- Oliver Kopyuv Online
- Dr. John Cook PhD Away
- Ali Amdaney Online
- Sarah McBrook Online
- oliver.kopyuv@gotbootstrap.com Offline
- oliver.kopyuv@gotbootstrap.com Busy
- oliver.kopyuv@gotbootstrap.com Offline
- +714651347790 Missed Call

Jun 19

Hey Tracey, did you get my files?

3:00 pm

Hi

Sorry going through a busy time in office. Yes I analyzed the solution.

It will require some resource, which I could not manage.

3:24 pm

Okay

Sending you some dough today, you can allocate the resources to this project.

3:26 pm

Perfect. Thanks a lot!

I will have them ready by tonight.

Cheers

Jun 20
Send

#### Layout Settings User Interface Settings

##### App Layout

Fixed Header header is in a fixed at all times
Fixed Navigation left panel is fixed
Minify Navigation Skew nav to maximize space
Hide Navigation roll mouse on edge to reveal
Top Navigation Relocate left pane to top
Fixed Footer page footer is fixed
Boxed Layout Encapsulates to a container

Fixed Background

##### Mobile Menu

Push Content Content pushed on menu reveal
No Overlay Removes mesh on menu reveal
Off-Canvas (beta) Content overlaps menu

##### Accessibility

Bigger Content Font content fonts are bigger for readability
High Contrast Text (WCAG 2 AA) 4.5:1 text contrast ratio
Daltonism (beta) color vision deficiency
Preloader Inside preloader will be inside content
SmartPanel Icons (not Panels) smartpanel buttons will appear as icons

##### Global Modifications

Clean Page Background adds more whitespace
Hide Navigation Icons invisible navigation icons
Disable CSS Animation Disables CSS based animations
Hide Info Card Hides info card from left panel
Lean Subheader distinguished page header
Hierarchical Navigation Clear breakdown of nav links
Dark Navigation Navigation background is darkend

##### Global Font Size

SM MD LG XL
Change root font size to effect rem values (resets on page refresh)

##### Theme colors more info

##### Theme Modes (beta) why beta?

###### Internet Explorer Issue

This particular component may not work as expected in Internet Explorer. Please use with caution.
Default
Light
Dark

Reset Settings
Factory Reset