コンテナなしの場合

コンテナありの場合


.container-fluid > .row を使う場合:

ブロックA
ブロックB

.row.no-gutters を使う場合:

ブロックC
ブロックD
ブロックE
          .container {
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
          }
          /* スマホサイズだと width: 100% になる */
          
          @media (min-width: 576px) {
            .container {
              max-width: 540px;
            }
          }
          
          @media (min-width: 768px) {
            .container {
              max-width: 720px;
            }
          }
          
          @media (min-width: 992px) {
            .container {
              max-width: 960px;
            }
          }
          /* 内部の幅を固定して
             中央配置するときに使う。
             固定幅は段階的に変化する
             仕組みになっている */
        
          .container-fluid {
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
          }
          /* ウィンドウ幅に応じて
             「内部の幅」を変化させる場合に使う */
        
          
          .no-gutters {
            margin-right: 0;
            margin-left: 0;
          }
          
          .no-gutters > .col,
          .no-gutters > [class*="col-"] {
            padding-right: 0;
            padding-left: 0;
          }
          /* rowの-15pxのネガティブマージンを
             打ち消して、左右に余白を設ける */
        

入れ子

新着情報 .col-9(外側)

.col-12(内部)

商品A

.col-6(内部)

商品B

.col-3(内部)

商品C

.col-3(内部)

Side bar
.col-3(外側)