Bootstrap4カラムの位置を調整【カラムのオフセット】

1つカラムを飛ばしたいときや余白を空けたい、中央に配置したいときにカラムのオフセットを使います。
Bootstrapバージョン3からは書き方が少し変更になりました。

バージョン3 .col-md-offset-* バージョン4 .offset-md-*

目次

カラムのオフセット

真ん中に余白を入れたい場合

.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-4 .offset-md-4
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>

1つずつカラムを飛ばしたい、左側に余白を入れたい場合

.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>

6カラムをセンター寄せにしたい場合

.col-md-6 .offset-md-3
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

マージンクラスで位置調整

.mr-auto.ml-auto を利用して、余白を空けることも可能です。

ml-autoで真ん中に余白

.ml-auto でleft側に余白。

.col-md-4
.col-md-4 .ml-auto
<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
</div>
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
<div class="container">
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
</div>

mr-autoで真ん中に余白

.col-auto はカラムの内容に合わせて自動で横幅サイズを合わせてくれます。.mr-auto でright側に余白。

.col-auto .mr-auto
.col-auto
<div class="container">
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>
あわせて読みたい
Bootstrap3カラムの位置を調整する方法【カラムのオフセット】 Bootstrapのカラムを利用していると1つカラムを飛ばしたいときや余白を空けたい、中央に配置したいときがあります。そんなときはカラムのオフセットを使います。 カラム...
  • URLをコピーしました!
目次