Bootstrap 4.1 Vertical Navs how to mr-auto/ml-auto badge

user_6197216 0
Viewed 1388

Is navs not navbar

https://getbootstrap.com/docs/4.1/components/navs/#vertical

enter image description here

<ul class="nav flex-column">
    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="fas fa-angle-right fa-fw"></i>
            Link A
            <span class="badge badge-warning badge-pill">140</span>
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="fas fa-angle-right fa-fw"></i>
            Link B
            <span class="badge badge-warning badge-pill">300</span>
        </a>
    </li>
</ul>

tired change

<span class="badge badge-warning badge-pill">

to

<span class="badge badge-warning badge-pill ml-auto">

but didn't work

Edited: see @Temani Afif answer below

if with d-flex only

enter image description here

with d-flex align-items-center solved the problem

enter image description here

bootstrap-4 css
1 Answers

You need to make the a element a flex container to be able to use ml-auto/mr-auto. Simply add d-flex to a:

I also added align-items-center to center but it's not mandatory:

.nav {
 background:pink;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<ul class="nav flex-column">
    <li class="nav-item">
        <a class="nav-link d-flex align-items-center" href="#">
            <i class="fas fa-angle-right fa-fw"></i>
            Link A
            <span class="badge badge-warning badge-pill ml-auto">140</span>
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link d-flex align-items-center" href="#">
            <i class="fas fa-angle-right fa-fw"></i>
            Link B
            <span class="badge badge-warning badge-pill ml-auto">300</span>
        </a>
    </li>
</ul>

user_86203330
Related