Bootstrap グリッド


設定方法

.containerで最大表示枠を設定
.rowで行を設定
.col-**-**でカラム数を設定(カラム数の合計は12に)

Extra small devices
スマートフォン
Small devices
タブレット
Medium devices
デスクトップPC
Large devices
デスクトップPC
ブラウザ表示幅 768px未満 768px~991px 992px~1199px 1200px以上
container最大幅 auto 750px 970px 1170px
Class名称 col-xs-** col-sm-** col-md-** col-lg-**
カラム数 12
カラム最大幅 auto 60px 78px 95px
カラム余白 30(左右に15pxの余白)
入れ子表示 有効
オフセット表示 無効 有効
カラム表示順 無効 有効
基本

col-02
col-05
col-05

<div class="container">
  <div class="row">
    <div class="col-xs-2">col-02</div>
    <div class="col-xs-5">col-05</div>
    <div class="col-xs-5">col-05</div>
  </div>
</div>

入れ子

col-02
col-6
col-6

<div class="container">
  <div class="row">
    <div class="col-xs-2">col-02</div>
    <div class="col-xs-10">
      <div class="col-xs-6">col-6</div>
      <div class="col-xs-6">col-6</div>
    </div>
  </div>
</div>

オフセットカラム

指定のカラム分ずらす

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<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>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

固定幅の場合

col-md-6
col-md-6

<div class="container">
  <div class="row">
    <div class="col-xs-6">col-md-6</div>
    <div class="col-xs-6">col-md-6</div>
  </div>
</div>

流動幅の場合

col-md-6
col-md-6

<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-xs-6">col-md-6</div>
    <div class="col-xs-6">col-md-6</div>
    </div>
</div>

列クラスを2つ指定

DeskTopの時は6カラム表示、スマホの時は2カラム表示に変更

col-xs-2 col-md-6
col-xs-2 col-md-6

<div class="container">
  <div class="row">
    <div class="col-xs-2 col-md-6">col-xs-2 col-md-6</div>
    <div class="col-xs-2 col-md-6">col-xs-2 col-md-6</div>
  </div>
</div>

<style>
  div {
    border:0.5px solid #888;
  }
</style>