Ask any question about Bootstrap here... and get an instant response.

How do I customize the color of badges within pagination controls in Bootstrap?

Asked on Nov 22, 2025

Answer

To customize the color of badges within pagination controls in Bootstrap, you can use custom CSS classes to override the default styles. Here's a simple example of how to achieve this.

<!-- BEGIN COPY / PASTE -->
        <ul class="pagination">
            <li class="page-item">
                <a class="page-link" href="#">
                    Page 1 <span class="badge custom-badge">New</span>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">
                    Page 2 <span class="badge custom-badge">Updated</span>
                </a>
            </li>
        </ul>

        <style>
            .custom-badge {
                background-color: #007bff; /* Custom color */
                color: white;
            }
        </style>
        <!-- END COPY / PASTE -->

Additional Comment:

Use the `.custom-badge` class to apply your custom styles to the badges.
You can change the `background-color` and `color` properties to suit your design needs.
Ensure that your custom CSS is loaded after Bootstrap's CSS to ensure it takes precedence.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How do I customize the color of badges within pagination controls in Bootstrap?

Asked on Nov 22, 2025

Answer

The Q&A Network