Didn’t find the answer you were looking for?

How can I align badges on top of pagination controls and breadcrumbs in Bootstrap?

Asked on Nov 26, 2025

Answer

To align badges on top of pagination controls and breadcrumbs in Bootstrap, you can use Bootstrap's utility classes to position the badges appropriately. Here's a simple example demonstrating how to achieve this alignment.

<!-- BEGIN COPY / PASTE -->
        <nav aria-label="Page navigation example">
            <ul class="pagination">
                <li class="page-item">
                    <span class="badge bg-primary position-absolute top-0 start-100 translate-middle">4</span>
                    <a class="page-link" href="#">1</a>
                </li>
                <li class="page-item">
                    <span class="badge bg-primary position-absolute top-0 start-100 translate-middle">2</span>
                    <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item">
                    <span class="badge bg-primary position-absolute top-0 start-100 translate-middle">3</span>
                    <a class="page-link" href="#">3</a>
                </li>
            </ul>
        </nav>

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <span class="badge bg-secondary position-absolute top-0 start-100 translate-middle">New</span>
                    <a href="#">Home</a>
                </li>
                <li class="breadcrumb-item">
                    <span class="badge bg-secondary position-absolute top-0 start-100 translate-middle">Updated</span>
                    <a href="#">Library</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">
                    <span class="badge bg-secondary position-absolute top-0 start-100 translate-middle">Current</span>
                    Data
                </li>
            </ol>
        </nav>
        <!-- END COPY / PASTE -->

Additional Comment:

The `position-absolute`, `top-0`, `start-100`, and `translate-middle` classes are used to position the badges at the top right of each item.
Adjust the badge content and styles as needed to fit your design requirements.
Ensure that the parent elements have `position: relative` to allow absolute positioning of the badges.

✅ Answered with Bootstrap 5 best practices.

Didn’t find the answer you were looking for?

How can I align badges on top of pagination controls and breadcrumbs in Bootstrap?

Asked on Nov 26, 2025

Answer

The Q&A Network