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

Asked on Aug 16, 2025

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.