公共样式
1. 使用.close 和&times 构建一个关闭按钮；

<button type="button" class="close" aria-label="关闭">
    <span aria-hidden="true">&times;</span>
</button>


2. 使用.clearfix 给浮动的区域的父元素添加，实现清理浮动的功能；

div.border {
200px;
height: 200px;
}
<div class="clearfix">
    <div class="float-left border border-success">left</div>
    <div class="float-right border border-success">right</div>
</div>
<div class="border border-warning">both</div>


3. 使用.float-left、.float-right、.float-none 实现浮动效果；
4. 还可以使用.float-*-left 等来实现不同屏幕的浮动效果；

<div class="float-md-left border border-success">left</div>
<div class="float-md-right border border-success">right</div>


5. 使用.text-hide 来隐藏元素标签内容，但本身还存在保持 SEO 优化；

<h1 class="text-hide" style="background:url('img/img1.png');">
　　Bootstrap4.x
</h1>


6. 使用.overflow-auto 和.overflow-hidden 来设置区域显示方式；

<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>


7. 使用.visible 和.invisible 来设置内容可见或不可见；

<div class="visible">Bootstrap4.x</div>
<div class="invisible">Bootstrap4.x</div>


8. 使用.align-*来设置内容文本的对齐方式；

<span class="align-baseline">baseline 基准</span>
<span class="align-text-top">text-top 文本顶部</span>
<span class="align-top">top 顶部</span>
<span class="align-middle">middle 垂直居中</span>
<span class="align-bottom">bottom 底部</span>
<span class="align-text-bottom">text-bottom 文本底部</span>
<table class="table table-bordered" style="height: 200px;">
    <tbody>
        <tr>
            <td class="align-baseline">baseline</td>
            <td class="align-top">top</td>
            <td class="align-middle">middle</td>
            <td class="align-bottom">bottom</td>
            <td class="align-text-top">text-top</td>
            <td class="align-text-bottom">text-bottom</td>
        </tr>
    </tbody>
</table>

PS：垂直对齐仅影响内联 inline、内联块 inline-block、内联表 inline-table、
表格单元格 table cell 元素

9. 使用.p-*来设置内边距(padding)，范围在 0-5 之间和 auto；

<span class="p-5">Bootstrap4.x</span>


10. 使用.m-*来设置外边距(margin)，范围在 0-5 之间和 auto；

<span class="m-5">Bootstrap4.x</span>


11. 使用.pt-*或 mt-*设置边缘的距离，这里的 t 可以是 top；
12. 其它的还有 b(bottom)、l(left)、r(right)等；

<span class="pt-5">Bootstrap4.x</span>
<span class="mt-5">Bootstrap4.x</span>


13. 使用.px-*或 mx-*设置左右边缘的距离，这里的 x 表示(left、right);

<span class="px-5">Bootstrap4.x</span>
<span class="mx-5">Bootstrap4.x</span>


14. 使用.py-*或 my-*设置上下边缘的距离，这里的 y 表示(top、bottom)；

<span class="py-5">Bootstrap4.x</span>
<span class="my-5">Bootstrap4.x</span>


15. 使用.pt-*-5，*可以是 md、lg 等响应式的方式来设置边缘；
16. 使用.w-*设置元素的长度，包括 25%、50%、75%、100%和 auto；

<div class="p-3 w-25 bg-info">25%</div>
<div class="p-3 w-50 bg-info">50%</div>
<div class="p-3 w-75 bg-info">75%</div>
<div class="p-3 w-100 bg-info">100%</div>
<div class="p-3 w-auto bg-info">auto</div>