Bootstrap4イメージの配置(Aligning images)の新設

イメージを左右に配置

<img src="..." class="float-left" alt="...">
<img src="..." class="float-right" alt="...">

イメージの中央揃え (.mx-auto.d-block 使用)

<img src="..." class="mx-auto d-block" alt="...">

イメージの中央揃え (.text(-{breakpoint})-center 使用)

<div class="text-center">
  <img src="..." alt="...">
</div>

【Bootstrap3.xとの変更箇所】

  • .float-none が追加
  • .pull-left ⇒ .float-left
  • .pull-right ⇒ .float-right

画像を中央に配置するにはBootstrap3では.center-blockでブロック要素のmargin:0 auto;が可能だったのですがBootstrapでは.d-blockでブロック表示、.mx-autoで中央配置、2つのクラスが必要です。

コメント

タイトルとURLをコピーしました