.container と .container-fluid

Window Width :

.container

1 of 2 (class="col-sm")
2 of 2 (class="col-sm")
1 of 3 (class="col-sm")
2 of 3 (class="col-sm")
3 of 3 (class="col-sm")

.container-fluid

1 of 2 (class="col-sm")
2 of 2 (class="col-sm")
1 of 3 (class="col-sm")
2 of 3 (class="col-sm")
3 of 3 (class="col-sm")
<h2>.container</h2>
<div class="container">
  <div class="row">
    <div class="col"> 1 of 2 (class="col") </div>
    <div class="col"> 2 of 2 (class="col") </div>
  </div>
  <div class="row">
    <div class="col"> 1 of 3 (class="col") </div>
    <div class="col"> 2 of 3 (class="col") </div>
    <div class="col"> 3 of 3 (class="col") </div>
  </div>
</div>

<h2>.container-fluid</h2>
<div class="container-fluid">
  <div class="row">
    <div class="col"> 1 of 2 (class="col") </div>
    <div class="col"> 2 of 2 (class="col") </div>
  </div>
  <div class="row">
    <div class="col"> 1 of 3 (class="col") </div>
    <div class="col"> 2 of 3 (class="col") </div>
    <div class="col"> 3 of 3 (class="col") </div>
  </div>
</div>
body {
  margin: 20px;
}
.row {
  margin-bottom: 20px;
}
[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86,61,124,.15);
  border: 1px solid rgba(86,61,124,.2);
}
.container, .container-fluid {
  border: 1px solid #ddd;
  margin-bottom: 40px;
  background-color: #efefef;
}