diff options
| -rw-r--r-- | scss/_utilities.scss | 2 | ||||
| -rw-r--r-- | site/content/docs/5.0/utilities/overflow.md | 10 |
2 files changed, 10 insertions, 2 deletions
diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 565c466c2..226c9143a 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -16,7 +16,7 @@ $utilities: map-merge( ), "overflow": ( property: overflow, - values: auto hidden, + values: auto hidden visible scroll, ), "display": ( responsive: true, diff --git a/site/content/docs/5.0/utilities/overflow.md b/site/content/docs/5.0/utilities/overflow.md index f8ae2f324..b400db74e 100644 --- a/site/content/docs/5.0/utilities/overflow.md +++ b/site/content/docs/5.0/utilities/overflow.md @@ -5,7 +5,7 @@ description: Use these shorthand utilities for quickly configuring how content o group: utilities --- -Barebones `overflow` functionality is provided for two values by default, and they are not responsive. +Barebones `overflow` functionality is provided for four values by default, and they are not responsive. <div class="bd-example d-md-flex"> <div class="overflow-auto p-3 mb-3 mb-md-0 mr-md-3 bg-light" style="max-width: 260px; max-height: 100px;"> @@ -14,11 +14,19 @@ Barebones `overflow` functionality is provided for two values by default, and th <div class="overflow-hidden p-3 bg-light" style="max-width: 260px; max-height: 100px;"> This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions. </div> + <div class="overflow-visible p-3 bg-light" style="max-width: 260px; max-height: 100px;"> + This is an example of using <code>.overflow-visible</code> on an element with set width and height dimensions. + </div> + <div class="overflow-scroll p-3 bg-light" style="max-width: 260px; max-height: 100px;"> + This is an example of using <code>.overflow-scroll</code> on an element with set width and height dimensions. + </div> </div> {{< highlight html >}} <div class="overflow-auto">...</div> <div class="overflow-hidden">...</div> +<div class="overflow-visible">...</div> +<div class="overflow-scroll">...</div> {{< /highlight >}} Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`. |