带有标题，副标题和图标的基本按钮，使用boostrap

Question

我正在使用bootstrap并希望保持这样（暂时没有其他库）。我在网页上有几个按钮，比如

|----------------------|
|       (icon)         |
|   BIG TITLE HERE     |
|  Small subtitle here |
|----------------------|

|----------------------|
|       (icon)         |
|   BIG TITLE HERE     |
|  Small subtitle here |
|----------------------|

它们位于页面的左侧，有3列div（col-md-3）。到目前为止，我有一个HTML

<div class="row">
    <div class="col-md-3">
        <ul class="buttons-ue">
            <li class="bg-lh text-uppercase bg-warning text-warning">
                <i class="icon-warning"></i>
                <strong>Title 1</strong>
                <small>Press here for warning</small>
            </li>
            <li class="bg-lh text-uppercase bg-danger text-danger">
                <i class="icon-danger"></i>
                <strong>Title 2</strong>
                <small>Press here if you dare</small>
            </li>
        </ul>
    </div>
</div>

<div class="row"> <div class="col-md-3"> <ul class="buttons-ue"> <li class="bg-lh text-uppercase bg-warning text-warning"> <i class="icon-warning"></i> <strong>Title 1</strong> <small>Press here for warning</small> </li> <li class="bg-lh text-uppercase bg-danger text-danger"> <i class="icon-danger"></i> <strong>Title 2</strong> <small>Press here if you dare</small> </li> </ul> </div> </div> 以及一些尚未改进的css类

{{ 1}}

建立这种组件的正确方法是什么，所以我只是简单地插入一些组件。