Bootstrap
WORKS

セクション内の基本的な構造【Bootstrap】

Bootstrapを使ったセクション内の構造の基本

<section class="container">
    <div class="row">
      <div class="col-12">
        ここに中身を入れる
      </div>
    </div>
  </section>
.container{
  background: #ccc;
}
.row{
  background: darksalmon;
}
.col{
  background: : darkseagreen;
}
ここに中身を入れる
  • container セクションのインナー幅
  • row    display:flexが設定されている
  • col     flexの子要素となる
  <section class="container-fluid">
    <div class="container">
      <div class="row">
        <div class="col-6">
          ここに中身を入れる
        </div>
      </div>
    </div>
  </section>
.container-fluid{
  background: #333;
}
.container{
  background: #ccc;
}
.row{
  background: darksalmon;
}
.col{
  background: : darkseagreen;
}
ここに中身を入れる

制作者コメント