#### Default

Primary Info Success Secondary Warning Danger Dark

    <span class="badge badge-primary"> Primary </span>
    <span class="badge badge-info"> Info </span>
    <span class="badge badge-success"> Success </span>
    <span class="badge badge-secondary"> Secondary </span>
    <span class="badge badge-warning"> Warning </span>
    <span class="badge badge-danger"> Danger </span>
    <span class="badge badge-dark"> Dark </span>

#### Outline

Primary Info Success Secondary Warning Danger Dark

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

#### Pills

Use `.badge-pills` class for pills.

Primary
Primary

#### Classic

Use `.badge-classic` class for classic.

Primary
Primary

#### Badges with Heading

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

# Example heading Primary

## Example heading success

### Example heading info

#### Example heading warning

##### Example heading danger

###### Example heading dark

    <h1>Example heading <span class="badge badge-primary">Primary</span></h1>
    <h2>Example heading <span class="badge badge-success">success</span></h2>
    <h3>Example heading <span class="badge badge-info">info</span></h3>
    <h4>Example heading <span class="badge badge-warning">warning</span></h4>
    <h5>Example heading <span class="badge badge-danger">danger</span></h5>
    <h6>Example heading <span class="badge badge-dark">dark</span></h6>

#### Tags

    <input type="text" id="skill-input">

#### Custom Badges

John Doe John Doe ×

    <button type="button" class="btn btn-primary position-relative mt-3 mb-3 ml-2">
        <span><svg> ... </svg> Facebook</span>
        <span class="badge badge-danger counter">22</span>
    </button>

    <button type="button" class="btn btn-info position-relative mt-3 mb-3 ml-2">
        <span>Twitter</span>
        <span class="badge badge-danger counter">22</span>
    </button>

    <button type="button" class="btn btn-secondary position-relative mt-3 mb-3 ml-2">
        <span><svg> ... </svg> </span>
        <span class="badge badge-danger counter">22</span>
    </button>

    <button type="button" class="btn btn-dark mt-3 mb-3 ml-2">
        Notifications <span class="badge badge-light">4</span>
    </button>

    <span class="badge-chip badge-warning mt-3 mb-3 ml-2 position-relative">
        <img src="assets/img/90x90.jpg" alt="Person" width="96" height="96">
        <span class="text">John Doe</span>
    </span>

    <span class="badge-chip badge-danger mt-3 mb-3 ml-2">
        <img src="assets/img/90x90.jpg" alt="Person" width="96" height="96">
        <span class="text">John Doe</span>
        <span class="closebtn pl-2" onclick="this.parentElement.style.display='none'">×
        </span>
    </span>