w-50

bootstrap5.css

.w-50 {
  width: 50% !important;
}

html bootstrap5 Sample

幅を指定する：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

右フロート

  <!-- afterでフロート解除が行われるので、フロートではないコンテンツが回り込まずに別ブロックに表示される -->
  <!-- 重なっていない浮いているから背景色出る -->
  <!-- 幅50でmx-autoで赤色を指定している -->
  <div class="w-50 mx-auto bg-danger clearfix">
    <div class="float-right bg-success">右フロート</div>
  </div>

フロートを解除しない（重なっているので背景色がでない）

右フロート

  <div class="w-50 mx-auto bg-danger">
    <div class="float-right bg-success">右フロート</div>
  </div>

テキストが折り返さないように設定する：text-nowrap

途中で折り返しなし	折り返しても良い

  <table class="w-50 mx-auto">
    <tr>
      <th class="text-nowrap">途中で折り返しなし</th>
      <td>折り返しても良い</td>
    </tr>
  </table>

プログレスバー：progressとprogress-barとw-50

  <!-- divで、progressとprogress-barの組み合わせで実装する -->
  <!-- 進捗度は、aria-valuenowの値を変える -->
  <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>