- class="container"で中央寄せ
- 12のグリッドを分割するために、rowというクラスを作る
- rowで囲んだ中に合計12になるようなdivを作る
- rowで囲んだものを中央寄せしたいときには、全体を囲むdivを作ってclass="container"
レスポンシブデザイン
- デバイス幅に応じてレイアウトを変える
- col-**-*で指定
- lg…ラージ（1200px以上）md…ミディアム（992px以上）、sm…スモール（768px以上）、xs…エクストラスモール（768px未満）
- その後の数値で幅を指定
- hidden-**（隠す）やvisible-**（表示する）の指定も可能
<div id="header" class="container" style="background:red;">header</div>
<div class="container">
<div class="row">
<div class="col-sm-3 hidden-xs" style="background:green;">Side1</div>
<div class="col-sm-6 col-xs-6" style="background:blue;">Main</div>
<div class="col-sm-3 col-xs-6" style="background:yellow;">Side2</div>
</div>
</div>
<div id="footer" class="container" style="background:black;">footer</div>
