Bootstrap3カラムの位置を調整する方法【カラムのオフセット】

2016年2月29日2023年10月6日

Bootstrapのカラムを利用していると1つカラムを飛ばしたいときや余白を空けたい、中央に配置したいときがあります。そんなときはカラムのオフセットを使います。

カラムのオフセット

カラムのオフセットを使うには.col-md-offset-*を使います。

例1. 左右に余白を入れたい、中央に配置したい場合

例えば、4カラムずつ3つ並んでいる

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

2カラムにして左に余白を空けたい場合

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