w-25

bootstrap5.css

bootstrap5.css
.w-25 {
  width: 25% !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>

長いテキストを省略記号：text-truncate w-25

２５文字以上は省略されます。２５文字以上は省略されます。２５文字以上は省略されます。２５文字以上は省略されます。

  <p class="text-truncate w-25">２５文字以上は省略されます。２５文字以上は省略されます。２５文字以上は省略されます。２５文字以上は省略されます。</p>

20pxの太さのプログレスバー：style

  <!-- 高さはstyleで設定する -->
  <div class="progress" style="height: 20px;">
    <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

プログレスバーにテキストラベルを追加する

25%
  <div class="progress" style="height: 20px;">
    <!-- divにテキストを書くだけ -->
    <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
  </div>