What’s the best way to show numeric counters with badges in navs?

Asked on Aug 16, 2025

1 Answer

To display numeric counters with badges in navigation items, you can use Bootstrap's badge component. This provides a clean and visually appealing way to show counts or notifications.

<!-- BEGIN COPY / PASTE -->
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link active" href="#">
                    Home <span class="badge bg-secondary">4</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    Profile <span class="badge bg-secondary">2</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    Messages <span class="badge bg-secondary">3</span>
                </a>
            </li>
        </ul>
        <!-- END COPY / PASTE -->

Additional Comment:

Use Bootstrap's `nav-pills` class for a pill-style navigation.
The `badge` component is used to display the numeric counter.
The `bg-secondary` class provides a gray background for the badge, but you can customize it with other contextual classes like `bg-primary`, `bg-success`, etc.
Ensure that the badge is placed inside the `nav-link` for proper alignment and styling.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions