More than 3 years have passed since last update.

[Bootstrap]グリッド内で画像を中央寄せする方法

Posted at 2020-01-07

結論

「img」に「class="mx-auto d-block"」を付与する。

<div class="row">
  <div class="col">
    <img class="mx-auto d-block" src="×××">
  </div>
</div>

グリッドシステムで1つのrow内で真ん中に空白を作り左右のグリッド内で画像を表示させています。
グリッドに対して画像が左寄せになるので、これを中央寄せにします。