コンテナ

全体をdiv.containerまたはdiv.container-fluidで挟むと、左右に余白ができます。div.rowを中に挟むと、余白がなくなります。.containerはウィンドウサイズに対して左右幅固定、.container-fluidは可変幅です。

container

グリッドデザインその1

箱1
箱2

container-fluid

グリッドデザインその2

箱1
箱2

<h2>container</h2>
<div class="container" style="border:1px solid #ccc;">
<h3>グリッドデザインその1</h3>
<div class="row">
<div class="col-xs-5" style="background: brown; height: 100px;">箱1</div>
<div class="col-xs-7" style="background: gray; height: 100px;">箱2</div>
</div>
</div>


<h2>container-fluid</h2>
<div class="container-fluid" style="border:1px solid #ccc;">
<h3>グリッドデザインその2</h3>
<div class="row">
<div class="col-xs-5" style="background: pink; height: 100px;">箱1</div>
<div class="col-xs-7" style="background: #ccc; height: 100px;">箱2</div>
</div>
</div>