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


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

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

テーブルのセル内の配置:align-bottomとalign-top


タイトル 1 タイトル 2 タイトル 3 タイトル 4
vertical-align: middle vertical-align: middle vertical-align: middle XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
vertical-align: bottom vertical-align: bottom vertical-align: bottom XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
vertical-align: middle vertical-align: middle align-top XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
  <table class="table align-middle">
    <thead>
      <tr>
        <th scope="col" class="w-25">タイトル 1</th>
        <th scope="col" class="w-25">タイトル 2</th>
        <th scope="col" class="w-25">タイトル 3</th>
        <th scope="col" class="w-25">タイトル 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>vertical-align: middle</td>
        <td>vertical-align: middle</td>
        <td>vertical-align: middle</td>
        <td>XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
          XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
        </td>
      </tr>
      <tr class="align-bottom">
        <td>vertical-align: bottom</td>
        <td>vertical-align: bottom</td>
        <td>vertical-align: bottom</td>
        <td>XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
          XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
        </td>
      </tr>
      <tr>
        <td>vertical-align: middle</td>
        <td>vertical-align: middle</td>
        <td class="align-top">align-top</td>
        <td>XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
          XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX
        </td>
      </tr>
    </tbody>
  </table>

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


  <!-- 高さは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>

プログレスバーにテキストラベルを追加するdiv:progress-bar


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>