As you can see in this screenshot, the text becomes vertically unaligned (slightly higher) when a button is added. How can I avoid this? (Bootstrap 5)

Here is the code:

<div class="container-fluid">
    <div class="row">
        <h2 class="border-bottom border-dark pt-4">Roles</h2>
    </div>
    <div class="card">
        <div class="card-header">
            <b>Roles</b>
        </div>

        <ul class="list-group list-group-flush">
            <li class="list-group-item d-flex justify-content-between">Admins
                <button class="btn btn-sm btn-outline-secondary" type="button">View</button>
            </li>
            <li class="list-group-item d-flex justify-content-between">Custom
                <button class="btn btn-sm btn-outline-secondary" type="button">Edit</button>
            </li>
        </ul>
    </div>
</div>

CodePudding user response：

Add class align-items-center to each li

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <h2 class="border-bottom border-dark pt-4">Roles</h2>
    </div>
    <div class="card">
        <div class="card-header">
            <b>Roles</b>
        </div>

        <ul class="list-group list-group-flush">
            <li class="list-group-item d-flex justify-content-between align-items-center">Admins
                <button class="btn btn-sm btn-outline-secondary" type="button">View</button>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">Custom
                <button class="btn btn-sm btn-outline-secondary" type="button">Edit</button>
            </li>
        </ul>
    </div>
</div>