How do I align icons and text vertically in buttons and list-group items?

Asked on Aug 17, 2025

1 Answer

To align icons and text vertically in buttons and list-group items using Bootstrap 5, you can utilize the `d-flex` and `align-items-center` classes. These classes help in aligning content within a flex container.

<!-- BEGIN COPY / PASTE -->
        <!-- Button with icon and text vertically aligned -->
        <button type="button" class="btn btn-primary d-flex align-items-center">
            <i class="bi bi-star me-2"></i>
            Star
        </button>

        <!-- List group item with icon and text vertically aligned -->
        <ul class="list-group">
            <li class="list-group-item d-flex align-items-center">
                <i class="bi bi-check-circle me-2"></i>
                Completed
            </li>
        </ul>
        <!-- END COPY / PASTE -->

Additional Comment:

The `d-flex` class makes the container a flexbox, allowing for flexible alignment.
`align-items-center` vertically centers the content within the flex container.
`me-2` adds margin to the right of the icon, spacing it from the text.
Ensure you include Bootstrap Icons or any other icon library you prefer.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions