mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-27 23:30:04 +02:00
Code Issues Releases Wiki Activity

Add new .overflow-x, .overflow-y, and object-fit utilities

Browse Source 
Overflow utilities are self-explanatory.

The object-fit property is used to specify how an `<img>` or `<video>` should be resized to fit its container. Offers a responsive alternative to using `background-image` for a resizable fill/fit image.
This commit is contained in:
Daniel O
2022-07-26 11:53:21 +01:00
committed by Mark Otto
parent d1d1f490ed
commit 0129d35796
6 changed files with 170 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
site/content/docs/5.2/utilities/overflow.md
View File

@@ -3,8 +3,11 @@ layout: docs
title: Overflow
description: Use these shorthand utilities for quickly configuring how content overflows an element.
group: utilities
toc: true
---
## Overflow
Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default.
<div class="bd-example d-md-flex">
@@ -29,6 +32,67 @@ Adjust the `overflow` property on the fly with four default values and classes.
<div class="overflow-scroll">...</div>
```
## Vertical and Horizontal Overflow
Specify how the overflowing content within the horizontal direction <i>(x-axis)</i> or vertical direction <i>(y-axis)</i> of the element should behave. Classes can be combined for various effects as you need.
### Overflow-x
Adjust the `overflow-x` property with four default values and classes. These will only affect the overflow of content horizontally:
<div class="bd-example d-md-flex">
<div class="overflow-x-auto p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px; white-space: nowrap;">
<div><code>.overflow-x-auto</code> example on an element</div>
<div> with set width and height dimensions.</div>
</div>
<div class="overflow-x-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
<div><code>.overflow-x-hidden</code> example</div>
<div>on an element with set width and height dimensions.</div>
</div>
<div class="overflow-x-visible p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
<div><code>.overflow-x-visible</code> example </div>
<div>on an element with set width and height dimensions.</div>
</div>
<div class="overflow-x-scroll p-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
<div><code>.overflow-x-scroll</code> example on an element</div>
<div> with set width and height dimensions.</div>
</div>
</div>
```html
<div class="overflow-x-auto">...</div>
<div class="overflow-x-hidden">...</div>
<div class="overflow-x-visible">...</div>
<div class="overflow-x-scroll">...</div>
```
### Overflow-y
Adjust the `overflow-y` property with four default values and classes. These will only affect the overflow of content vertically:
<div class="bd-example d-md-flex">
<div class="overflow-y-auto p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
<code>.overflow-y-auto</code> example on an element with set width and height dimensions.
</div>
<div class="overflow-y-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
<code>.overflow-y-hidden</code> example on an element with set width and height dimensions.
</div>
<div class="overflow-y-visible p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
<code>.overflow-y-visible</code> example on an element with set width and height dimensions.
</div>
<div class="overflow-y-scroll p-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
<code>.overflow-y-scroll</code> example on an element with set width and height dimensions.
</div>
</div>
```html
<div class="overflow-y-auto">...</div>
<div class="overflow-y-hidden">...</div>
<div class="overflow-y-visible">...</div>
<div class="overflow-y-scroll">...</div>
```
Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.
## Sass