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

Asked on Aug 15, 2025

1 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.

← Back to All Questions