Bootstrap 4: Vertical align floated element in a list - html

Question

How can I float a fontawesome icon to the right and still have it vertically middle aligned? I've tried using ml-auto and Flexbox, but it's not working.
Here's my code:
<ul class="list-group flex-column">
<li class="list-group-item py-2 d-flex justify-content-start">
<a href="#">
<img src="https://placehold.it/40x40" height="40" class="mr-4">
<span>Text Here</span>
<i class="fa fa-angle-right ml-auto" aria-hidden="true"></i>
</a>
</li>
</ul>
Can someone help me out? Thanks!

Answer 1

Use the flex and sizing helper classes to make the link a flex parent with 2 children - the content you want on the left, and the content on the right. Use .justify-content-between, .align-items-center to separate the content so the arrow is on the right and centered vertically.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group flex-column">
<li class="list-group-item py-2 d-flex">
<a href="#" class="d-flex w-100 justify-content-between align-items-center">
<span>
<img src="https://placehold.it/40x40" height="40" class="mr-4">
<span>Text Here</span>
</span>
<i class="fa fa-angle-right ml-auto" aria-hidden="true"></i>
</a>
</li>
</ul>

Answer 2

Try with this structure:
<ul class="list-group">
<li class="list-group-item">
<a class="w-100 d-flex align-items-center py-2" href="#">
<img src="https://placehold.it/40x40" height="40" class="mr-4">
<span>Text Here</span>
<i class="fa fa-angle-right ml-auto" aria-hidden="true"></i>
</a>
</li>
</ul>
Click here to see it working in jsfiddle.
Your <a> tag doesn't fill the entire parent, so you can't see the effect of ml-auto on the icon. Also d-flex must be in the a tag, not in li.