#### Default

A simple labeling component. Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.

# h1.Example heading New

## h2.Example heading New

#### h4.Example heading Info Link

##### h5.Example heading New

###### h6.Example heading New

#### Pill Badges

Use the `.rounded-pill` modifier class to make badges more rounded.

Primary Secondary Success Danger Warning Info Light Dark

##### Lighten Badges

Use the `.badgesoft--*` modifier class to make badges lighten.

Primary Secondary Success Danger Warning Info Dark

##### Outline Badges

Using the `.badge-outline-*` to quickly create a bordered badges.

Primary Secondary Success Danger Warning Info Dark

#### Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge. Badge can be more contextual as well. Just use regular convention e.g. `badge-*color`, `bg-primary` to have badge with different background.

Primary Secondary Success Danger Warning Info Light Dark

##### Lighten Badges

Using the `.badgesoft--*` modifier class, you can have more soften variation.

Primary Secondary Success Danger Warning Info Dark

##### Outline Badges

Using the `.badge-outline-*` to quickly create a bordered badges.

Primary Secondary Success Danger Warning Info Dark

#### Badge Positioned

Use utilities to modify a `.badge` and position it in the corner of a link or button.

##### Theme Settings

##### Color Scheme

##### Light

##### Dark

##### Layout Mode

##### Fluid

##### Detached

##### Menu Color

##### Light

##### Dark

##### Sidebar Size

##### Default

##### Compact

##### Condensed

##### Hover View

##### Full Layout

##### Hidden

##### Container Width

Full Boxed

##### Layout Position

Fixed Scrollable
Buy Now