Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。
サイズユーティリティ（Sizing） v4.0.0新設v4.2.1追加
幅と高さのユーティリティを使用して、要素を簡単に幅広または背高に作成。
親要素を基準にする（Relative to the parent）
幅と高さのユーティリティは scss/_variables.scss の $sizes Sassマップで生成。デフォルトでは、25%, 50%, 75%, 100%, auto がサポートされている。さまざまなユーティリティを生成する必要がある場合はこれらの値を変更すること。
割合幅の設定（Width）
幅の種類
Width 25%：
.w-25Width 50%：
.w-50Width 75%：
.w-75Width 100%：
.w-100Width auto：
.w-auto v4.1.0追加設定例 ※背景色の設定付き
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>【設定】
- 幅の設定をしたい要素に
.w-{%}を入れる（.w-{%}は上記「幅の種類」から選択）
割合高の設定
高さの種類
Height 25%：
.h-25Height 50%：
.h-50Height 75%：
.h-75Height 100%：
.h-100Height auto：
.h-auto v4.1.0追加設定例 ※背景色の設定付き
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="h-25 d-inline-block align-top" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
<div class="h-50 d-inline-block align-top" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
<div class="h-75 d-inline-block align-top" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
<div class="h-100 d-inline-block align-top" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
<div class="h-auto d-inline-block align-top" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
</div>【設定】
- 高さの設定をしたい要素に
.h-{%}を入れる（.h-{%}は上記「高さの種類」から選択）
また、必要に応じて max-width と max-height ユーティリティを使用。
最大幅100%の設定
必要に応じて max-width: 100%; ユーティリティも使用可能。
見本
●.mw-100 で表示
※.img-fluid で表示（参考）
設定例
<img src="..." alt="..." class="mw-100" width="1200" height="250">【設定】
- 要素に
.mw-100を入れることで、その要素に簡単にmax-width: 100%の設定が可能
【注意】
- 同要素（
<img>など）にheightのサイズ設定をしている場合、.img-fluid（レスポンシブイメージ）と違い、高さは自動調整されない
最大高100%の設定
同様に max-height: 100%; ユーティリティーも使用可能。
見本
Max-height 100%：
.mh-100設定例 ※背景色の設定付き
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="mh-100" style="width: 140px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
</div>【設定】
- 要素に
.mh-100を入れることで、その要素に簡単にmax-height: 100%の設定が可能
ビューポートを基準にする（Relative to the viewport）v4.2.1新設
ユーティリティを使用して、ビューポートを基準に幅と高さを設定。
設定例
<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>【設定】
- 最小幅がビューポート100%：
.min-vw-100（min-width: 100vw;） - 最小高がビューポート100%：
.min-vh-100（min-height: 100vh;） - ビューポートの幅100%：
.vw-100（width: 100vw;） - ビューポートの高さ100%：
.vh-100（height: 100vh;）