container / row / col-XX のクラス

階層の構造としては、

1. containerクラスを親要素(グループ要素)へ
2. rowクラスをcontainer付属親要素の下階層にある要素(小グループ要素)へ
3. 『col-XX』クラスをそれぞれ要素へ
   ※コンテンツ(アイテム)ごとで要素が使用する幅を調整してあげます。

ソースは以下のようになっています。

        <section class="container mt-4">
            <div class="row">
                <h4 class="col-3">col-3 (25%)</h4>
                <h4 class="col-3">col-3 (25%)</h4>
                <h4 class="col-3">col-3 (25%)</h4>
                <h4 class="col-3">col-3 (25%)</h4>
            </div>
        </section>
        

containerクラスでグループ化したコンテナを設けて、 その中にrowクラスで内部のコンテンツを横並び"行"で配置していく設定を行う。 最後に『col-』で１２分割された行の内、何マス分で配置するかをそれぞれ決めて設定していく。 作業の流れは、ザックリとこうなっています。