##### Badges

#### Default Badges

Use the `badge` class to set a default badge.

Primary Secondary Success Info Warning Danger Dark Light

#### Soft Badges

Use the `badge-soft-` class with below-mentioned variation to create softer badge.

Primary Secondary Success Info Warning Danger Dark Light

#### Outline Badges

Use the `badge-outline-` class with the below-mentioned variation to create a badge with the outline.

Primary Secondary Success Info Warning Danger Dark Light

#### Rounded Pill Badges

Use the `rounded-pill` class to make badges more rounded with a larger border-radius.

Primary Secondary Success Info Warning Danger Dark Light

#### Rounded Pill Badges with soft effect

Use the `rounded-pill badge-soft-` class with the below-mentioned variation to create a badge more rounded with a soft background.

Primary Secondary Success Info Warning Danger Dark Light

#### Soft Border Badges

Use the `badge-border` and `badge-soft-` with below mentioned modifier classes to make badges with border & soft backgorund.

Primary Secondary Success Danger Warning Info Dark Light

#### Outline Pill Badges

Use the `rounded-pill badge-outline-` class with the below-mentioned variation to create a outline Pill badge.

Primary Secondary Success Info Warning Danger Dark Light

#### Label Badges

Use the `badge-label` class to create a badge with the label.

Primary Secondary Success Danger Warning Info Dark Light

#### Gradient Badges

Use the `badge-gradient-*` class to create a gradient styled badge.

Primary Secondary Success Danger Warning Info Dark

#### Button Position Badges

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

#### Badges With Button

Badges can be used as part of buttons to provide a counter.

#### Badges with Heading

Example of the badge used in the HTML Heading.

# Example heading New

##### Layout

###### Choose your layout

##### Vertical

##### Horizontal

##### Two Column

##### RTL Mode

###### Change Language Direction.

checkbox

##### Color Scheme

###### Choose Light or Dark Scheme.

##### Blue

##### Light

##### Dark

##### Orange

##### Brink Pink

##### Green

##### Layout Width

###### Choose Fluid or Boxed layout.

##### Fluid

##### Boxed

##### Layout Position

###### Choose Fixed or Scrollable Layout Position.

Fixed Scrollable

##### Topbar Color

###### Choose Light or Dark Topbar Color.

##### Light

##### Dark