BootstrapV4 - Can't push a span to the right - twitter-bootstrap-4

Question

In the following code (react isn't important here), I'm using the bootstrapV4 class "text-sm-right". It works perfectly for my <button>, but it doesn't for my post.categories <span> which remain on the left. I can't make it work and I don't explain it. Is someone having an explanation ?
renderPosts() {
return this.props.posts.map((post) => {
return (
<li className="list-group-item" key={post.id}>
<span className="text-sm-right">{post.categories}</span>
<strong>{post.title}</strong>
</li>
);
});
}
render() {
return (
<div>
<div className="text-sm-right post-new-button">
<Link to="/posts/new" className="btn btn-primary">Add post</Link>
</div>
<h3>Posts</h3>
<ul className="list-group">
{this.renderPosts()}
</ul>
</div>
);
}
Here is a screenshot of the rendered site, button positioned as wanted but categories remaining on the left...

Answer 1

.list-group-item has display: flex by default. This means that all you have to do is to add justify-content-between class to your <li> and move your declaration one line bottom.
Your renderPosts method should look as follow:
renderPosts() {
return this.props.posts.map((post) => {
return (
<li className="list-group-item justify-content-between" key={post.id}>
<strong>{post.title}</strong>
<span>{post.categories}</span>
</li>
);
});
}
You can find an example of this approach on bootstrap documentation