bootstrap4.css
.w-50 {
  width: 50% !important;
}
■幅、高さ:Sizing:ユーティリティ:幅を指定するクラスw-25

w-25
w-50
w-75
w-100
  <div class="w-25 border">w-25</div>
  <div class="w-50 border">w-50</div>
  <div class="w-75 border">w-75</div>
  <div class="w-100 border">w-100</div>
■親要素でフロートを解除する:Clearfix:ユーティリティ:親要素で設定して、フロートを解除するためのクラス(重なっていない浮いているから背景色出る)

右フロート
  <div class="w-50 mx-auto bg-danger clearfix">
    <div class="float-right bg-success">右フロート</div>
  </div>
■親要素でフロートを解除する:Clearfix:ユーティリティ:フロートを解除しない(重なっているので背景色がでない)

右フロート
  <div class="w-50 mx-auto bg-danger">
    <div class="float-right bg-success">右フロート</div>
  </div>
■リストグループ:list-group:コンポーネント:基本的な使用例 list-group

  • リスト項目1
  • リスト項目2
  • リスト項目3
  <section class="w-50 m-auto">
  <ul class="list-group">
    <li class="list-group-item">リスト項目1</li>
    <li class="list-group-item">リスト項目2</li>
    <li class="list-group-item">リスト項目3</li>
  </ul>
</section>
■リストグループ:list-group:コンポーネント:バッジ付きリストグループ

  • リスト項目1 14
  • リスト項目2 2
  • リスト項目3 1
  <section class="w-50 m-auto my-5">
      <ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目1
      <span class="badge badge-primary badge-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目2
      <span class="badge badge-primary badge-pill">2</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目3
      <span class="badge badge-primary badge-pill">1</span>
    </li>
  </ul>
</section>
■リストグループ:list-group:コンポーネント:リスト項目をアクティブ状態にする

  • リスト項目1
  • リスト項目2
  • リスト項目3
  <section class="w-50 m-auto">
      <ul class="list-group">
    <li class="list-group-item active">リスト項目1</li>
    <li class="list-group-item">リスト項目2</li>
    <li class="list-group-item">リスト項目3</li>
  </ul>
</section>
■リストグループ:list-group:コンポーネント:リストグループの背景色

  • これは「primary」のリスト項目です。
  • これは「secondary」のリスト項目です。
  • これは「success」のリスト項目です。
  • これは「danger」のリスト項目です。
  • これは「warning」のリスト項目です。
  • これは「info」のリスト項目です。
  • これは「light」のリスト項目です。
  • これは「dark」のリスト項目です。
  • これは「デフォルト」のリスト項目です。
  <section class="w-50 m-auto my-5">
      <ul class="list-group">
    <li class="list-group-item list-group-item-primary">これは「primary」のリスト項目です。</li>
    <li class="list-group-item list-group-item-secondary">これは「secondary」のリスト項目です。</li>
    <li class="list-group-item list-group-item-success">これは「success」のリスト項目です。</li>
    <li class="list-group-item list-group-item-danger">これは「danger」のリスト項目です。</li>
    <li class="list-group-item list-group-item-warning">これは「warning」のリスト項目です。</li>
    <li class="list-group-item list-group-item-info">これは「info」のリスト項目です。</li>
    <li class="list-group-item list-group-item-light">これは「light」のリスト項目です。</li>
    <li class="list-group-item list-group-item-dark">これは「dark」のリスト項目です。</li>
    <li class="list-group-item">これは「デフォルト」のリスト項目です。</li>
  </ul>
</section>
■リストグループ:list-group:コンポーネント:リスト項目を無効状態にする

  • リスト項目1
  • リスト項目2
  • リスト項目3
  <section class="w-50 m-auto">
      <ul class="list-group">
    <li class="list-group-item disabled">リスト項目1</li>
    <li class="list-group-item">リスト項目2</li>
    <li class="list-group-item">リスト項目3</li>
  </ul>
</section>
■リストグループ:list-group:コンポーネント:aタグ リストグループ

  <section class="w-50 m-auto">
      <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">リスト項目1</a>
    <a href="#" class="list-group-item list-group-item-action">リスト項目2</a>
    <a href="#" class="list-group-item list-group-item-action disabled">リスト項目3</a>
  </div>
</section>
■リストグループ:list-group:コンポーネント:アクティブ状態のアクション可能な背景色クラスのリストグループ

  <section class="w-50 m-auto my-5">
    <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action list-group-item-primary active">これはアクティブ状態の「primary」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary active">これはアクティブ状態の「secondary」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-success active">これはアクティブ状態の「success」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-danger active">これはアクティブ状態の「danger」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-warning active">これはアクティブ状態の「warning」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-info active">これはアクティブ状態の「info」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-light active">これはアクティブ状態の「light」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-dark active">これはアクティブ状態の「dark」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action active">これはアクティブ状態の「デフォルト」のリスト項目です。</a>
  </div>
</section>
■リストグループ:list-group:コンポーネント:アクション可能な背景色クラスのリストグループ

  <section class="w-50 m-auto my-5">
    <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action list-group-item-primary">これは「primary」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">これは「secondary」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-success">これは「success」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-danger">これは「danger」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-warning">これは「warning」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-info">これは「info」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-light">これは「light」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-dark">これは「dark」のリスト項目です。</a>
    <a href="#" class="list-group-item list-group-item-action">これは「デフォルト」のリスト項目です。</a>
  </div>
</section>
■リストグループ:list-group:コンポーネント:リストグループ aタグ

  <section class="w-50 m-auto">
      <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">リスト項目1</a>
    <a href="#" class="list-group-item list-group-item-action">リスト項目2</a>
    <a href="#" class="list-group-item list-group-item-action disabled">リスト項目3</a>
  </div>
</section>
■リストグループ:list-group:コンポーネント:カスタムコンテンツの リストグループ aタグ

  <section class="w-50 m-auto my-5">
    <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">リスト項目1のヘッダ</h5>
        <small>3日前</small>
      </div>
      <p class="mb-1">リスト項目1のコンテンツの見本です。</p>
      <small>リスト項目1のサブコンテンツです</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">リスト項目2のヘッダ</h5>
        <small class="text-muted">3日前</small>
      </div>
      <p class="mb-1">リスト項目2のコンテンツの見本です。</p>
      <small class="text-muted">リスト項目2のサブコンテンツです。</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">リスト項目3のヘッダ</h5>
        <small class="text-muted">3日前</small>
      </div>
      <p class="mb-1">リスト項目3のコンテンツの見本です。</p>
      <small class="text-muted">リスト項目3のサブコンテンツです。</small>
    </a>
  </div>
  </section>
■リストグループ:list-group:コンポーネント:li 枠なしのリストグループ

  • リスト項目1
  • リスト項目2
  • リスト項目3
  <section class="w-50 m-auto">
    <div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">リスト項目1</li>
        <li class="list-group-item">リスト項目2</li>
        <li class="list-group-item">リスト項目3</li>
      </ul>
   </div>
  </section>
■リストグループ:list-group:コンポーネント:ボタンのリストグループ button

  <section class="w-50 m-auto my-5">
    <div class="list-group">
      <button type="button" class="list-group-item list-group-item-action">リスト項目1</button>
      <button type="button" class="list-group-item list-group-item-action">リスト項目2</button>
      <button type="button" class="list-group-item list-group-item-action" disabled>リスト項目3</button>
    </div>
  </section>
■テーブル:table::テキストが折り返さないように設定するクラスtable

文字の途中で折り返しをしない設定 折り返しても良い
  <table class="w-50 mx-auto">
    <tr>
      <th class="text-nowrap">文字の途中で折り返しをしない設定</th>
      <td>折り返しても良い</td>
    </tr>
  </table>
  
■プログレスバー:progress::基本的な使用例

 <div class="progress mb-3">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar" style="width: 20%" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress mb-3">
    <div class="progress-bar" style="width: 80%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress">
    <div class="progress-bar w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
  </div>