col-sm

bootstrap5.css

bootstrap5.css
@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.3333333333%;
  }
  .offset-sm-2 {
    margin-left: 16.6666666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.3333333333%;
  }
  .offset-sm-5 {
    margin-left: 41.6666666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.3333333333%;
  }
  .offset-sm-8 {
    margin-left: 66.6666666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.3333333333%;
  }
  .offset-sm-11 {
    margin-left: 91.6666666667%;
  }
  .g-sm-0,
  .gx-sm-0 {
    --bs-gutter-x: 0;
  }
  .g-sm-0,
  .gy-sm-0 {
    --bs-gutter-y: 0;
  }
  .g-sm-1,
  .gx-sm-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-sm-1,
  .gy-sm-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-sm-2,
  .gx-sm-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-sm-2,
  .gy-sm-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-sm-3,
  .gx-sm-3 {
    --bs-gutter-x: 1rem;
  }
  .g-sm-3,
  .gy-sm-3 {
    --bs-gutter-y: 1rem;
  }
  .g-sm-4,
  .gx-sm-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-sm-4,
  .gy-sm-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-sm-5,
  .gx-sm-5 {
    --bs-gutter-x: 3rem;
  }
  .g-sm-5,
  .gy-sm-5 {
    --bs-gutter-y: 3rem;
  }
}

html bootstrap5 Sample

ブレイクポイントによる切り替え:col-sm-8


col-sm-8
col-sm-4
col-sm
col-sm
col-sm
  <!-- col-smの指定がブレークポイントとして機能する、スマートフォン(横持ち)の場合の指定ー -->
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>

グリッドレイアウトのネスト(入れ子、階層化):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>

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>

rowとcolのオフセットのリセット:offset-md-0


col-sm-5とcol-md-6
col-sm-5とoffset-sm-2とcol-md-6とoffset-md-0
  <div class="row">
    <div class="col-sm-5 col-md-6">col-sm-5とcol-md-6</div>
    <!-- Medium以上でオフセットをクリア -->
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">col-sm-5とoffset-sm-2とcol-md-6とoffset-md-0</div>
  </div>

グリッドレイアウトとカード→カード幅の制約が決まる:card


カードのタイトル

カードの内容

ボタン

カードのタイトル

カードの内容

ボタン
  <div class="row">
    <div class="col-sm-6">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">カードのタイトル</h4>
          <p class="card-text">カードの内容</p>
          <a href="#" class="btn btn-primary">ボタン</a>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">カードのタイトル</h4>
          <p class="card-text">カードの内容</p>
          <a href="#" class="btn btn-primary">ボタン</a>
        </div>
      </div>
    </div>
  </div>

定義リスト:dlとdtとdd


dt1
用語1の説明。
長いテキストは切り捨てて省略
用語2の説明。
用語3
ネストされた用語4
ネストされた用語4の説明
  <!-- rowをcolで制御する -->
  <dl class="row">
    <dt class="col-sm-3">dt1</dt>
    <dd class="col-sm-9">用語1の説明。</dd>
    <!-- text-truncateがcolの幅で自動設定される -->
    <dt class="col-sm-3 text-truncate">長いテキストは切り捨てて省略</dt>
    <dd class="col-sm-9">用語2の説明。</dd>
    <dt class="col-sm-3">用語3</dt>
    <dd class="col-sm-9">
      <dl class="row">
        <dt class="col-sm-4">ネストされた用語4</dt>
        <dd class="col-sm-8">ネストされた用語4の説明</dd>
      </dl>
    </dd>
  </dl>

フォームタイトルのアイコン、水平レイアウト:rowとcolとfa-shopping-basket


formタイトルにfont-awesome

  <!-- https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css -->
  <!-- font-awesomeによるアイコン -->
  <h3 class="block-title-info">
    <i class="fa fa-shopping-basket" aria-hidden="true"></i>formタイトルにfont-awesome
  </h3>
  <div class="row">
    <!-- formのレイアウトにrowとcolを利用して、垂直から水平レイアウトに変更する -->
    <!-- 最小単位のセット、勝手に順番に2列で並んでいく -->
    <div class="mb-3 col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="select1a">Select:</label>
      <select id="select1a" class="form-select">
        <option>Select A</option>
        <option>Select B</option>
      </select>
    </div>
    <div class="mb-3 col-sm-6">
      <!-- クリックするとファイルダイヤログが表示 -->
      <label for="file1">Fileを選択を開く</label>
      <input type="file" id="file1" class="form-control-file" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="select1a">check:</label>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1a" checked />
        <label class="form-check-label" for="check1a">Check A</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1b" />
        <label class="form-check-label" for="check1b">Check B</label>
      </div>
    </div>
    <div class="mb-3 col-sm-6">
      <label for="select1a">radio:</label>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio1" id="radio1a" checked />
        <label class="form-check-label" for="radio1a">Check A</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio1" id="radio1b" />
        <label class="form-check-label" for="radio1b">Check B</label>
      </div>
    </div>
  </div>

読み取りテキストを、枠を非表示にする:form-control-plaintext


  <form>
    <!-- divにrowを設定して、labelとdivにcolを設定する -->
    <div class="mb-3 row">
      <label for="staticEmail" class="col-sm-4 col-form-label">メールアドレス</label>
      <div class="col-sm-8">
        <!-- inputの枠を表示しない -->
        <input type="text" class="form-control-plaintext" readonly id="staticEmail" value="email@example.com">
      </div>
    </div>
    <div class="mb-3 row">
      <label for="inputPassword" class="col-sm-4 col-form-label">パスワード</label>
      <div class="col-sm-8">
        <!-- typeにpasswordを使うと、入力内容が*として表示される -->
        <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
      </div>
    </div>
  </form>

フォームレイアウト3カラム:rowとcol


  <!-- col-sm-7 のような特定のカラムクラスを使って、残りの .col が残りのスペースを均等に分割する -->
  <div class="row g-3">
    <div class="col-sm-7">
      <input type="text" class="form-control" placeholder="住所" aria-label="住所" />
    </div>
    <div class="col-sm">
      <input type="text" class="form-control" placeholder="マンション名" aria-label="マンション名" />
    </div>
    <div class="col-sm">
      <input type="text" class="form-control" placeholder="部屋番号" aria-label="部屋番号" />
    </div>
  </div>

水平配置のフォームを作成する:mb-3とrowとcol


ラジオボタン
チェックボックス
  <div class="mb-3 row">
    <label for="inputEmail" class="col-sm-2 col-form-label">メールアドレス</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
    </div>
  </div>
  <div class="mb-3 row">
    <label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
    </div>
  </div>
  <fieldset class="mb-3">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">ラジオボタン</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="radios" id="radios1" value="option1" checked>
          <label class="form-check-label" for="radios1">オプション1</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="radios" id="radios2" value="option2">
          <label class="form-check-label" for="radios2">オプション2</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="radios" id="radios3" value="option3" disabled>
          <label class="form-check-label" for="radios3">オプション3(無効)</label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="mb-3 row">
    <div class="col-sm-2">チェックボックス</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1">
        <label class="form-check-label" for="check1">チェックする</label>
      </div>
    </div>
  </div>
  <div class="mb-3 row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">サインイン</button>
    </div>
  </div>

ラベルサイズを調整する:col-form-label-smとform-control-sm


  <div class="mb-3 row">
    <!-- 小サイズのラベル -->
    <label for="labelSm" class="col-sm-3 col-form-label col-form-label-sm">小サイズ:col-form-label-sm</label>
    <div class="col-sm-9">
      <input type="email" class="form-control form-control-sm" id="labelSm" placeholder="form-control-sm">
    </div>
  </div>
  <div class="mb-3 row">
    <!-- 標準サイズのラベル -->
    <label for="labelDefault" class="col-sm-3 col-form-label">標準サイズ</label>
    <div class="col-sm-9">
      <input type="email" class="form-control" id="labelDefault" placeholder="Default size">
    </div>
  </div>
  <div class="mb-3 row">
    <!-- 大サイズのラベル -->
    <label for="labelLg" class="col-sm-3 col-form-label col-form-label-lg">大サイズ:col-form-label-lg</label>
    <div class="col-sm-9">
      <input type="email" class="form-control form-control-lg" id="labelLg" placeholder="form-control-lg">
    </div>
  </div>

js Collapse (コラプス)折り畳み:collapse


a要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
  <div class="row">
    <div class="col-sm-6 mb-4">
      <!-- a要素とhref属性による切替ボタン -->
      <p>
        <a data-bs-toggle="collapse" href="#collapseContent01" aria-expanded="false" aria-controls="collapseContent01">
          a要素とhref属性によるボタン<br>
          罫線なし、色なしでやれば、リンクではなく、その下にコンテンツを出せる
        </a>
      </p>
      <div class="collapse" id="collapseContent01">
        <div class="card card-body">
          a要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
        </div>
      </div>
    </div>
  </div>