サイズ設定のプロパティとクラス
Bootstrap v4 CSSは、要素のサイズを制御するいくつかのクラスを提供します。これらのいくつかは、コンポーネントのプロパティに変換されています。
コンポーネントのsizeプロパティ
様々なコンポーネントは、オプションでサイズを指定できます（sizeプロパティを介して）。以下は、デフォルトのBootstrap v4 CSSでサポートされているサイズです。
利用可能なサイズ
sm小lg大
サイズが指定されていない場合、通常のサイズが表示されます（通常はmdと呼ばれます）。
これらのサイズ値は、使用されているコンポーネントに応じて、適切なBootstrap CSSクラスに変換されます。たとえば、ボタンの場合は.btn-<size>、モーダルの場合は.modal-<size>、フォーム要素の場合は.form-control-<size>、ページネーションボタンの場合は.pagination-<size>などです。
ブレークポイントサイズ
Bootstrap v4には、ビューポートのブレークポイントサイズも含まれています：xs、sm、md、lg、xl。これらは、ユーザーのビューポートの幅を表します。
ブレークポイントサイズの詳細は、レイアウトとグリッドのドキュメントをご覧ください。
サイズ設定ユーティリティクラス
幅と高さのユーティリティクラスを使用すると、要素を（親要素に対して）簡単に広くしたり、高くしたりできます。
幅と高さのユーティリティは、Bootstrapの_variables.scssにある$sizes Sassマップから生成されます。デフォルトでは、25%、50%、75%、100%がサポートされています。必要に応じてこれらの値を変更して、ここで異なるユーティリティを生成します。
幅
<div class="text-center">
<div class="w-25 p-3 mb-1 bg-secondary text-light">Width 25%</div>
<div class="w-50 p-3 mb-1 bg-secondary text-light">Width 50%</div>
<div class="w-75 p-3 mb-1 bg-secondary text-light">Width 75%</div>
<div class="w-100 p-3 bg-secondary text-light">Width 100%</div>
</div>
<!-- widths.vue -->高さ
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">
Height 25%
</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">
Height 50%
</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">
Height 75%
</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">
Height 100%
</div>
</div>
<!-- heights.vue -->最大幅と最大高さ
必要に応じて、mw-100（max-width: 100%;）およびmh-100（max-height: 100%;）ユーティリティを使用することもできます。
追加リソース
詳細については、Bootstrap v4公式ドキュメントサイトを参照してください。