セクション内の基本的な構造【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;
}
ここに中身を入れる
