diff options
| author | Gaurav Behere <[email protected]> | 2020-07-21 11:24:38 +0300 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2020-10-13 16:48:17 +0300 |
| commit | 776afb8e9e3f535c4ce748aa1b53e06ebe9bf3e8 (patch) | |
| tree | 586fdbed8a201eac4ea2a3c61d5836cf260470c0 | |
| parent | f3cfc8e7ec8e936e73e6b11449cd8d989fe680f1 (diff) | |
| download | bootstrap-776afb8e9e3f535c4ce748aa1b53e06ebe9bf3e8.tar.xz bootstrap-776afb8e9e3f535c4ce748aa1b53e06ebe9bf3e8.zip | |
Adding overflow visible as util
| -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`. |