How do I align badges inside buttons and nav links cleanly?

Asked on Aug 15, 2025

Answer

To align badges inside buttons and nav links cleanly in Bootstrap 5, you can use the utility classes to ensure proper alignment and spacing. Here's a simple example to demonstrate this.

<!-- BEGIN COPY / PASTE -->
        <button type="button" class="btn btn-primary position-relative">
            Notifications
            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                99+
                <span class="visually-hidden">unread messages</span>
            </span>
        </button>

        <nav class="nav">
            <a class="nav-link position-relative" href="#">
                Messages
                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success">
                    5
                    <span class="visually-hidden">new messages</span>
                </span>
            </a>
        </nav>
        <!-- END COPY / PASTE -->

Additional Comment:

Use `position-relative` on the button or nav link to set the context for the badge's absolute positioning.
The badge uses `position-absolute` to place it relative to the button or link.
`top-0 start-100 translate-middle` positions the badge at the top right corner.
`badge rounded-pill` gives the badge a pill shape.
`bg-danger` and `bg-success` are used for badge background colors.
`visually-hidden` ensures accessibility by providing screen readers with context.

✅ Answered with Bootstrap 5 best practices.