Bootstrap 4.1 Vertical Navs how to mr-auto/ml-auto badge
Bootstrap 4.1 Vertical Navs how to mr-auto/ml-auto badge
Is navs not navbar
navs
navbar
https://getbootstrap.com/docs/4.1/components/navs/#vertical
<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">
<span class="badge badge-warning badge-pill">
to
<span class="badge badge-warning badge-pill ml-auto">
<span class="badge badge-warning badge-pill ml-auto">
but didn't work
Edited: see @Temani Afif answer below
if with d-flex only
d-flex
with d-flex align-items-center solved the problem
d-flex align-items-center
mr-auto
yes ml-auto and mr-auto both not work
– kenken9999
Sep 18 '18 at 0:03
1 Answer
1
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:
a
ml-auto
mr-auto
d-flex
a
I also added align-items-center to center but it's not mandatory:
align-items-center
.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>
thankyou so much, must add
d-flex align-items-center to get this work, if only d-flex, the badge look something wrong– kenken9999
Sep 18 '18 at 0:13
d-flex align-items-center
@kenken9999 it look stretched not wrong ;) because the default alignment is stretch
– Temani Afif
Sep 18 '18 at 0:21
anyways thankyou so much ;)
– kenken9999
Sep 18 '18 at 0:23
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy
have you tried
mr-auto?– Chunbin Li
Sep 18 '18 at 0:03