#### General UI

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

#### h4.Example heading Info Soft

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

##### Soft Badges

Use the `.badge-soft-*` modifier class to make badges soft.

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

#### 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. `bg-*color`, `bg-primary` to have badge with different background.

Primary Secondary Success Danger Warning Info Light Dark

##### Soft Badges

Using the `.badge-soft*` 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

#### Badge Positioned

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

#### Pagination

Provide pagination links for your site or app with the multi-page pagination component.

Default Pagination

Simple pagination inspired by Rdio, great for apps and search results.

Rounded Pagination

Add `.pagination-rounded` for rounded pagination.

Sizing

Add `.pagination-lg` or `.pagination-sm` for additional sizes.

Alignment

Change the alignment of pagination components with flexbox utilities.

#### Breadcrumb

Indicate the current page’s location within a navigational hierarchy.