Bootstrapのカラムを利用していると1つカラムを飛ばしたいときや余白を空けたい、中央に配置したいときがあります。そんなときはカラムのオフセットを使います。
目次
カラムのオフセット
カラムのオフセットを使うには.col-md-offset-*を使います。
例1. 左右に余白を入れたい、中央に配置したい場合
例えば、4カラムずつ3つ並んでいる
col-md-4
col-md-4
col-md-4
2カラムにして左右に余白を空けたい場合
左に2カラム空けたいのでcol-md-offset-2を使います。
col-md-4 col-md-offset-2
col-md-4
<div class="row">
<div class="col-md-4 col-md-offset-2">col-md-4 col-md-offset-2</div>
<div class="col-md-4">col-md-4</div>
</div>中央に余白を入れたい場合
左から（1・4・2・4・1 ）。左に1カラム空けたいのでcol-md-offset-1を中心に2カラム空けたいのでcol-md-offset-2を使います。
col-md-4 col-md-offset-1
col-md-4 col-md-offset-2
<div class="row">
<div class="col-md-4 col-md-offset-1">col-md-4 col-md-offset-1</div>
<div class="col-md-4 col-md-offset-2">col-md-4 col-md-offset-2</div>
</div>例2. １つずつカラムを飛ばしたい、左側に余白を入れたい場合
例えば、3カラムずつ4つ並んでいる
col-md-3
col-md-3
col-md-3
col-md-3
2カラムにして左に余白を空けたい場合
左に3カラム空けたいのでcol-md-offset-3を使います。
col-md-3 col-md-offset-3
col-md-3 col-md-offset-3
<div class="row">
<div class="col-md-3 col-md-offset-3">col-md-3 col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">col-md-3 col-md-offset-3</div>
</div>
あわせて読みたい
Bootstrap4カラムの位置を調整【カラムのオフセット】
1つカラムを飛ばしたいときや余白を空けたい、中央に配置したいときにカラムのオフセットを使います。Bootstrapバージョン3からは書き方が少し変更になりました。 バー...