The Positioned feature for the Badge

[2mkabir]

Hello,

I'm introducing a new feature for the Badge component: the Positioned feature.

Please note that the "Positioned" feature is available in the core Bootstrap:
https://getbootstrap.com/docs/5.3/components/badge/#positioned

To implement this feature, I'm adding a new prop called positioned to the Badge component. Depending on the value of the pill prop, specific classes will be applied:

When pill is true, the following classes will be added:

position-absolute top-0 start-100 translate-middle

When pill is false, the following classes will be added:

position-absolute top-0 start-100 translate-middle border border-light rounded-circle

Also I added it to the docs examples:

<Button variant="primary" className="me-4">
        Notifications <Badge bg="secondary">4</Badge>
        <span className="visually-hidden">unread messages</span>
</Button>
<Button variant="primary" className="position-relative me-4">
        Inbox <Badge positioned pill bg="danger">99+</Badge>
        <span className="visually-hidden">unread messages</span>
</Button>
<Button variant="primary" className="position-relative">
        Profile <Badge positioned bg="danger" className="p-2" />
        <span className="visually-hidden">New alerts</span>
</Button>