Html 右对齐引导列表组中的动画字体图标

我试图显示一个状态列表，文本在左边，结果在右边。我正在使用字体awesome heart动画来显示一颗跳动的心脏。我希望心是对的，但似乎无法使它对的：

<div class="row">
    <div class="col-sm-offset-3 col-sm-6 server-dashboard-list">
        <ul class="list-group">
            <li class="list-group-item justify-content-between" >
                Database Up
                <span class="database-up text-colour-red" ><i class="fa fa-heart faa-pulse animated fa-1-5-font-size"></i></span>
            </li>
            <li class="list-group-item justify-content-between">
                Active Database Connections
                <span class="badge badge-pill active-database-connections"></span>
            </li>
        </ul>
    </div>
</div>

建立数据库


活动数据库连接

---

徽章是正确的，但心脏是不正确的。

嗨，我不完全确定这是否是你想要的，但希望它能帮助你

但是如果你在一个新的类中，在你的css中，在这个类下，你可以把

float:right。它应该向右移动

如果你需要更多的帮助，喊我的路。
我试过了，但还是没有漂起来。然后我意识到我需要将ul的宽度设置为100%，这就解决了这个问题。非常感谢。然后我意识到我可以使用类pull right而不是style=float:right。