Bootstrap CSS Grid

 グリッドシステムは、.row クラスで指定した行に .col-**-n で指定した列 (カラム) を入れたもので構成する。これらは入れ子にもできる。

列のクラス .col-**-n において、** は xs (極小), sm (小), md (中), lg (大) のどれかを指定する。これらは単なる大きさを意味するのではなく、デバイスのサイズを意味する。例えば、xs なら画面の小さなフィーチャーフォン、lg なら画面の大きなデスクトップ PC に適したものである。

.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-4
.col-sm-4
.col-sm-3
.col-sm-5
.col-sm-3
.col-sm-2
.col-sm-3

上のグリッドシステムの HTML ソースは下のようになっている。クラス gb は境界線を表示するため、このページで独自に作ったクラスである。

<div class="row">
 <div class="col-sm-1 gb">.col-sm-1</div>
 <div class="col-sm-1 gb">.col-sm-1</div>
 <div class="col-sm-1 gb">.col-sm-1</div>
 <div class="col-sm-1 gb">.col-sm-1</div>
 <div class="col-sm-1 gb">.col-sm-1</div>
 <div class="col-sm-1 gb">.col-sm-1</div>
 <div class="col-sm-1 gb">.col-sm-1</div>
 <div class="col-sm-1 gb">.col-sm-1</div>
</div>
<div class="row">
 <div class="col-sm-4 gb">.col-sm-4</div>
 <div class="col-sm-4 gb">.col-sm-4</div>
</div>
<div class="row">
 <div class="col-sm-3 gb">.col-sm-3</div>
 <div class="col-sm-5 gb">.col-sm-5</div>
</div>
<div class="row">
 <div class="col-sm-3 gb">.col-sm-3</div>
 <div class="col-sm-2 gb">.col-sm-2</div>
 <div class="col-sm-3 gb">.col-sm-3</div>
</div>

入れ子もできる。

nest1
nest2

<div class="row">
 <div class="col-sm-8 gb" style="padding:16px;">
  <div class="row">
   <div class="col-sm-4 gb">nest1</div>
   <div class="col-sm-4 gb">nest2</div>
  </div>
 </div>
</div>

カラムのオフセットを指定することもできる。

offset-2 lg-2
offset-5 lg-2

<div class="row">
 <div class="col-sm-2 col-sm-offset-2 gb" style="padding:16px;">offset-2 lg-2</div>
 <div class="col-sm-2 col-sm-offset-5  gb" style="padding:16px;">offset-5 lg-2</div>
</div>