【bootstrap】 컨테이너와 그리드 레이아웃 샘플

<!-- コンテナーについて
https://getbootstrap.jp/docs/4.5/layout/overview/#containers -->
<!-- 全てのブレークポイントでwidth:100% -->
<div class="container-fluid bg-secondary text-left box-height">
    container-fluid
</div>
<!-- 各種ブレークポイントに対応 -->
<div class="container bg-secondary text-left box-height">
    container
</div>
<!-- container-md:幅768px以上はwidth:720px -->
<!-- mx-auto:ブロックレベルコンテンツを水平センタリング -->
<div class="mt-5 container-md mx-auto bg-secondary text-center box-height">
    container-md
</div>

<!-- グリッドレイアウト -->
<!-- https://getbootstrap.jp/docs/4.5/layout/grid/ -->
<div class="mt-5 container-md mx-auto row box-height">
    <div class="col-md-2 bg-primary text-white">
        a
    </div>
    <div class="col-md-10 bg-dark text-white">
        b
    </div>
</div>

<!-- rowのパディングいらないとき -->
<div class="container-md mx-auto row mt-5 p-0 box-height">
    <div class="col-md-2 bg-primary text-white">
        c
    </div>
    <div class="col-md-10 bg-dark text-white">
        d
    </div>
</div>

<!-- コンテナの高さの中央にsub-boxをおく -->
<!-- フレックスについて
https://getbootstrap.jp/docs/4.5/utilities/flex/ -->
<div class="container-md mx-auto bg-secondary row mt-5 p-0 box-height d-flex align-items-md-center">
    <div class="col-md-2 bg-primary text-white">
        <span class="align-middle">e</span>
    </div>
    <div class="col-md-10 bg-dark text-white">
        <span class="align-middle">f</span>
    </div>
</div>

.box-height {
  height: 50px;
}