FM / utilities

/var/www/vhosts/ihelp.ro/httpdocs/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/

/var/www/vhosts/ihelp.ro/httpdocs/vendor/twbs/bootstrap/site/content/docs/5.3/utilities

Name	Size	Mode	Actions
api.md	17135	0644	edit dl rm
background.md	6460	0644	edit dl rm
borders.md	7727	0644	edit dl rm
colors.md	5958	0644	edit dl rm
display.md	4420	0644	edit dl rm
flex.md	22160	0644	edit dl rm
float.md	1770	0644	edit dl rm
interactions.md	2264	0644	edit dl rm
link.md	4506	0644	edit dl rm
object-fit.md	3690	0644	edit dl rm
opacity.md	1178	0644	edit dl rm
overflow.md	4534	0644	edit dl rm
position.md	5945	0644	edit dl rm
shadows.md	1165	0644	edit dl rm
sizing.md	2116	0644	edit dl rm
spacing.md	5848	0644	edit dl rm
text.md	6671	0644	edit dl rm
vertical-align.md	1703	0644	edit dl rm
visibility.md	1048	0644	edit dl rm
z-index.md	2161	0644	edit dl rm

Edit: /var/www/vhosts/ihelp.ro/httpdocs/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/overflow.md (4534B)

---
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">
  <div class="overflow-auto p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary" style="max-width: 260px; max-height: 100px;">
    This is an example of using <code>.overflow-auto</code> on an element with set width and height dimensions. By design, this content will vertically scroll.
  </div>
  <div class="overflow-hidden p-3 mb-3 mb-md-0 me-md-3 bg-body-tertiary" 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 mb-3 mb-md-0 me-md-3 bg-body-tertiary" 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-body-tertiary" 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>

```html
<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>
```

### `overflow-x`

Adjust the `overflow-x` property to 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-body-tertiary 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-body-tertiary 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-body-tertiary 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-body-tertiary 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 to 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-body-tertiary 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-body-tertiary 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-body-tertiary 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-body-tertiary 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`.

## CSS

### Sass utilities API

Overflow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

{{< scss-docs name="utils-overflow" file="scss/_utilities.scss" >}}

--- 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.

This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.

This is an example of using .overflow-hidden on an element with set width and height dimensions.

This is an example of using .overflow-visible on an element with set width and height dimensions.

This is an example of using .overflow-scroll on an element with set width and height dimensions.

```html

...

``` ### `overflow-x` Adjust the `overflow-x` property to affect the overflow of content horizontally.

.overflow-x-auto example on an element

with set width and height dimensions.

.overflow-x-hidden example

on an element with set width and height dimensions.

.overflow-x-visible example

on an element with set width and height dimensions.

.overflow-x-scroll example on an element

with set width and height dimensions.

```html

...

``` ### `overflow-y` Adjust the `overflow-y` property to affect the overflow of content vertically.

.overflow-y-auto example on an element with set width and height dimensions.

.overflow-y-hidden example on an element with set width and height dimensions.

.overflow-y-visible example on an element with set width and height dimensions.

.overflow-y-scroll example on an element with set width and height dimensions.

```html

...

``` Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`. ## CSS ### Sass utilities API Overflow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) {{< scss-docs name="utils-overflow" file="scss/_utilities.scss" >}}