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

2019.02.22  2019.04.26

Bootstrapバージョン3からは書き方が少し変更になりました。
バージョン3 .col-md-offset-*  バージョン4 .offset-md-*

1つカラムを飛ばしたいときや余白を空けたい、中央に配置したいときにカラムのオフセットを使います。

カラムのオフセット

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

.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>

例2、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>

例3、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 を利用して、余白を空けることも可能です。

例1、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>

例2、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>

関連記事