Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。
はみ出しユーティリティ（Overflow） v4.2.1新設
これらの短縮形ユーティリティを使用して、コンテンツを要素からはみ出させる方法を素早く構成。
必要最小限の overflow 機能（要素のはみ出し部分の表示）はデフォルトで2つの値（auto,hidden）に対して提供され、レスポンシブはしない。
見本
●.overflow-auto (overflow: auto;)
これは、幅と高さが設定された要素に対して
.overflow-auto を使用する例。 設計上、このコンテンツは垂直方向にスクロールする。
●.overflow-hidden (overflow: hidden;)
これは、幅と高さが設定された要素に対して
.overflow-hidden を使用する例。
設定例
HTML<div class="overflow-auto p-3 mb-3 mb-md-0 mr-md-3 bg-light" style="max-width: 260px; max-height: 80px;">...</div>
<div class="overflow-hidden p-3 bg-light" style="max-width: 260px; max-height: 80px;">...</div>
Sass変数を使用して、scss/_variables.scss の $overflows 変数を変更することによってはみ出しユーティリティのカスタマイズが可能。
【設定】
- 使用したい要素に
.overflow-{auto|hidden}を入れる