col-8

bootstrap5.css

bootstrap5.css
.col-8 {
  flex: 0 0 auto;
  width: 66.6666666667%;
}

html bootstrap5 Sample

グリッドレイアウトのネスト(入れ子、階層化):colとrow


第1階層: col-sm-9
第2階層: col-8
第2階層: col-4
第1階層: col-sm-3
  <!-- rowの幅は、ひとつ上のhtmlタグの幅に制約を受けて100%になる -->
  <div class="row">
    <div class="col-sm-9">第1階層: col-sm-9
      <!-- 階層化colの中にrow、colの幅を基準にして12の計算が始まる -->
      <div class="row">
        <!-- colを2つ書くと、それぞれの画面の状況により適用されるものが変わる -->
        <div class="col-8">第2階層: col-8</div>
        <div class="col-4">第2階層: col-4</div>
      </div>
    </div>
    <div class="col-sm-3">第1階層: col-sm-3</div>
  </div>

リストグループとタブ:list-home-listとtab


  <div class="row">
    <div class="col-4">
      <div class="list-group" id="list-tab" role="tablist">
        <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="tab"
          href="#list-home" role="tab" aria-controls="list-home">Home</a>
        <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="tab"
          href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
        <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="tab"
          href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
        <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="tab"
          href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
      </div>
    </div>
    <div class="col-8">
      <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
          <p>本文home</p>
        </div>
        <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
          <p>本文profile</p>
        </div>
        <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
          <p>本文messages</p>
        </div>
        <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
          <p>本文settings</p>
        </div>
      </div>
    </div>
  </div>