#### Badges

#### 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

### h3.Example heading

#### h4.Example heading Info Link

##### h5.Example heading New

###### h6.Example heading New

                                                            <h1>h1.Example heading <span class="badge bg-secondary text-light">New</span></h1>
                                                            <h2>h2.Example heading <span class="badge badge-success-lighten">New</span></h2>
                                                            <h3>
                                                                h3.Example heading
                                                                <button type="button" class="btn btn-sm btn-primary">
                                                                    Notifications <span class="badge bg-light text-dark">4</span>
                                                                </button>
                                                            </h3>
                                                            <h4>h4.Example heading <a href="#" class="badge badge-info-lighten">Info Link</a></h4>
                                                            <h5>h5.Example heading <span class="badge badge-outline-warning">New</span></h5>
                                                            <h6>h6.Example heading <span class="badge bg-danger">New</span></h6>

#### 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 `.badge-*-lighten` modifier class to make badges lighten.

Primary Secondary Success Danger Warning Info Light Dark

##### Outline Badges

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

Primary Secondary Success Danger Warning Info Light Dark

                                                            <!-- Default Badges -->
                                                            <span class="badge bg-primary rounded-pill">Primary</span>
                                                            <span class="badge bg-secondary text-light rounded-pill">Secondary</span>
                                                            <span class="badge bg-success rounded-pill">Success</span>
                                                            <span class="badge bg-danger rounded-pill">Danger</span>
                                                            <span class="badge bg-warning rounded-pill">Warning</span>
                                                            <span class="badge bg-info rounded-pill">Info</span>
                                                            <span class="badge bg-light text-dark rounded-pill">Light</span>
                                                            <span class="badge bg-dark rounded-pill">Dark</span>

                                                            <!-- Lighten Badges -->
                                                            <span class="badge badge-primary-lighten rounded-pill">Primary</span>
                                                            <span class="badge badge-secondary-lighten rounded-pill">Secondary</span>
                                                            <span class="badge badge-success-lighten rounded-pill">Success</span>
                                                            <span class="badge badge-danger-lighten rounded-pill">Danger</span>
                                                            <span class="badge badge-warning-lighten rounded-pill">Warning</span>
                                                            <span class="badge badge-info-lighten rounded-pill">Info</span>
                                                            <span class="badge badge-light-lighten rounded-pill">Light</span>
                                                            <span class="badge badge-dark-lighten rounded-pill">Dark</span>

                                                            <!-- Outline Badges -->
                                                            <span class="badge badge-outline-primary rounded-pill">Primary</span>
                                                            <span class="badge badge-outline-secondary rounded-pill">Secondary</span>
                                                            <span class="badge badge-outline-success rounded-pill">Success</span>
                                                            <span class="badge badge-outline-danger rounded-pill">Danger</span>
                                                            <span class="badge badge-outline-warning rounded-pill">Warning</span>
                                                            <span class="badge badge-outline-info rounded-pill">Info</span>
                                                            <span class="badge badge-outline-light rounded-pill">Light</span>
                                                            <span class="badge badge-outline-dark rounded-pill">Dark</span>

#### 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 `.badge-*-lighten` modifier class, you can have more soften variation.

Primary Secondary Success Danger Warning Info Light Dark

##### Outline Badges

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

Primary Secondary Success Danger Warning Info Light Dark

                                                            <!-- Default Badges -->
                                                            <span class="badge bg-primary">Primary</span>
                                                            <span class="badge bg-secondary text-light">Secondary</span>
                                                            <span class="badge bg-success">Success</span>
                                                            <span class="badge bg-danger">Danger</span>
                                                            <span class="badge bg-warning">Warning</span>
                                                            <span class="badge bg-info">Info</span>
                                                            <span class="badge bg-light text-dark">Light</span>
                                                            <span class="badge bg-dark">Dark</span>

                                                            <!-- Lighten Badges -->
                                                            <span class="badge badge-primary-lighten">Primary</span>
                                                            <span class="badge badge-secondary-lighten">Secondary</span>
                                                            <span class="badge badge-success-lighten">Success</span>
                                                            <span class="badge badge-danger-lighten">Danger</span>
                                                            <span class="badge badge-warning-lighten">Warning</span>
                                                            <span class="badge badge-info-lighten">Info</span>
                                                            <span class="badge badge-light-lighten">Light</span>
                                                            <span class="badge badge-dark-lighten">Dark</span>

                                                            <!-- Outline Badges -->
                                                            <span class="badge badge-outline-primary">Primary</span>
                                                            <span class="badge badge-outline-secondary">Secondary</span>
                                                            <span class="badge badge-outline-success">Success</span>
                                                            <span class="badge badge-outline-danger">Danger</span>
                                                            <span class="badge badge-outline-warning">Warning</span>
                                                            <span class="badge badge-outline-info">Info</span>
                                                            <span class="badge badge-outline-light">Light</span>
                                                            <span class="badge badge-outline-dark">Dark</span>

##### Settings

Customize the overall color scheme, sidebar menu, etc.

##### Color Scheme

Light Mode
Dark Mode

##### Width

Fluid
Boxed

##### Left Sidebar

Default
Light
Dark
Fixed
Condensed
Scrollable
Purchase Now