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

高さを指定する:h-25


h-25
h-50
h-75
h-100

  <!-- 親で指定した高さに対して、割合を設定した高さになる -->
  <div style="height: 100px;">
    <div class="h-25 d-inline-block border bg-primary">h-25</div>
    <div class="h-50 d-inline-block border bg-primary">h-50</div>
    <div class="h-75 d-inline-block border bg-primary">h-75</div>
    <div class="h-100 d-inline-block border bg-primary">h-100</div>
  </div>

最大値を指定する:mh-100



  <div style="height: 300px;">
    <img class="mh-100" src="https://via.placeholder.com/318x180/FFFF00/000000?text=img" alt="">
  </div>

最大幅を指定する:mw-100



  <div style="height: 300px;">
    <img class="mw-100" src="https://via.placeholder.com/318x180/FFFF00/000000?text=img" alt="">
  </div>

スクリーンリーダー非表示だけど非視覚者のみに読み上げる:visually-hiddenとvisually-hidden-focusable


メインコンテンツへ

スキップコンテンツ

  <h3 class="visually-hidden">メインコンテンツへ</h3>
  <a class="visually-hidden-focusable" href="#content">スキップコンテンツ</a>