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>１つずつカラムを飛ばしたい、左側に余白を入れたい場合
.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つカラムを飛ばしたいときや余白を空けたい、中央に配置したいときがあります。そんなときはカラムのオフセットを使います。 カラム...