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

2019年2月22日2023年10月6日

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

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

カラムのオフセット

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

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

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

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

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