不同點
| Bootstrap3 | Bootstrap4 |
| Less | Sass語言編寫 |
| 4種柵格類 | 5種柵格類 |
| 使用px為單位 | 使用rem和em為單位（除部分margin和padding使用px） |
| 使用push和pull向左右移動 | 偏移列通過offset-類設置 |
| 使用float的布局方式 | 選擇彈性盒模型（flexbox） |
注：Bootstrap3的4種柵格：
特小（col-xs-） 適配手機(<768px)
小（col-sm-） 適配平板(≥768px)
中（col-md-） 適配電腦(≥992px)
大（col-lg-） 適配寬屏電腦(≥1200px)
Bootstrap4的5種柵格：
特小（col-）(<576px)
小（col-sm-）(≥576px)
中（col-md-）(≥768px)
大（col-lg-） (≥992px)
特大（col-xl-）（≥1200px）
Bootstrap4特點
新增網格層適配了移動端；
全面引入ES6新特性（重寫所有JavaScript插件）；
css文件減少了至少40%；
所有文檔都用Markdown編輯器重寫；
放棄對IE8的支持
注意點：
Bootstrap4中不能使用Bootstrap3中的hidden-xs,visible-xs類
在Bootstrap4中如果你想實現在某個尺寸下隱藏，你應該參照下表
值得一提的是B3中使用hidden-sm只會在sm尺寸下隱藏，而其他尺寸會正常顯示，在B4中如果你單純的指定d-sm-none 則該元素會在sm尺寸隱藏，但sm以上的尺寸也會隱藏，在sm之下的尺寸正常顯示，這里就涉及到向上兼容的問題，所以你在設置sm元素隱藏時還得設置md尺寸顯示，如上表，其他以此類推
隱藏向上兼容，顯示向下兼容
Bootstrap3 與Bootstrap4垂直水平居中：
Bootstrap3水平居中
// 文本：
class ="text-center"
// 圖片居中：
class = "center-block"
bootstrap4水平居中：
flex下： 比如div.row
align-items-center可以使內部元素垂直居中
justify-content-center可以使內部元素水平居中
align-self-center 元素居中
圖片居中：.d-block .mx-auto