Bootstrap4ではセンタリングの処理が変更になった！

Bootstrap4になってから、Bootstrap3.xとは記述方法が異なるものが多くありますね。その一つにブロック要素のセンタリングがあります。Bootstrapを使用している人で、センタリングといえば、これまでは「.center-block」の記述をしている人も多かったかと思います。または「Offset」などで配置を移動していた方もいるかもしれません。

ところがBootstrap4では、レスポンシブ・グリッド修飾子クラス（offset、pull、push）は廃止となり、センタリングも「.center-block」から、「.mx-auto」の記述に変更となりました。

■記述の意味
.ml-auto　ブロック要素左側のマージンをautoにする
.mr-auto　ブロック要素右側のマージンをautoにする
.mx-auto　ブロック要素両側のマージンをautoにする

まとめ

このようにBootstrap4で、ブロック要素をセンタリングする場合は、「.mx-auto」の記述で行う事になりますので、注意したいところですね。