col-6 col-md-4

html bootstrap5 Sample

rowとcolの画面の状況でカラムの幅を変える、Medium以上:col-md-8


col-12とcol-md-8
col-6とcol-md-4
  <div class="row">
    <!-- Medium以上:だとmdが優先的に選択される -->
    <!-- xl:デスクトップ PC などの大画面モニタ 1200px 以上 -->
    <!-- lg:ノート PC などの省サイズモニタ 992px 以上 -->
    <!-- md:タブレット端末など 768px 以上 -->
    <!-- sm:スマートフォン(横持ち)など 576px 以上 -->
    <!-- -:スマートフォン(縦持ち)、IoT 端末など 576px 未満 -->
    <div class="col-12 col-md-8">col-12とcol-md-8</div>
    <div class="col-6 col-md-4">col-6col-md-4</div>
  </div>

rowとcolの画面の状況で変える、Medium以上:Medium以上:col-md-4


col-6とcol-md-4
col-6とcol-md-4
col-6とcol-md-4
  <div class="row">
    <!-- Medium以下なら、2列カラムにある-->
    <div class="col-6 col-md-4">col-6とcol-md-4</div>
    <div class="col-6 col-md-4">col-6とcol-md-4</div>
    <div class="col-6 col-md-4">col-6とcol-md-4</div>
  </div>

rowとcolのガターなしカラム:g-0


.col-sm-6 .col-md-8
.col-6 .col-md-4
  <!-- 定義済みのガタークラスは .g-0 で取り除くことができます -->
  <div class="row g-0">
    <div class="col-sm-6 col-md-8 border bg-light">.col-sm-6 .col-md-8</div>
    <div class="col-6 col-md-4 border bg-light">.col-6 .col-md-4</div>
  </div>