rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

Adding overflow visible as util

Browse Source
This commit is contained in:
Gaurav Behere 2020-07-21 11:24:38 +03:00 committed by XhmikosR
parent f3cfc8e7ec
commit 776afb8e9e
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_utilities.scss
View File

@ -16,7 +16,7 @@ $utilities: map-merge(
), ),
"overflow": ( "overflow": (
property: overflow, property: overflow,
values: auto hidden, values: auto hidden visible scroll,
), ),
"display": ( "display": (
responsive: true, responsive: true,

10
site/content/docs/5.0/utilities/overflow.md
View File

@ -5,7 +5,7 @@ description: Use these shorthand utilities for quickly configuring how content o
group: utilities 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="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;"> <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;"> <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. This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions.
</div> </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> </div>
{{< highlight html >}} {{< highlight html >}}
<div class="overflow-auto">...</div> <div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div> <div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>
{{< /highlight >}} {{< /highlight >}}
Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`. Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.