Bootstrap
5.3
Utilidades
Overflow

Overflow

Usa estas utilidades abreviadas para configurar rápidamente cómo el contenido desborda un elemento.

Curso de JavaScript

Overflow

Ajusta la propiedad overflow sobre la marcha con cuatro valores y clases predeterminados. Estas clases no son responsive de forma predeterminada.

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

overflow-x

Ajusta la propiedad overflow-x para afectar el desbordamiento del contenido horizontalmente.

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

Ajusta la propiedad overflow-y para afectar el desbordamiento del contenido verticalmente.

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>

Usando variables Sass, puedes personalizar las utilidades de desbordamiento cambiando la variable $overflows en _variables.scss.

CSS

API de utilidades de Sass

Las utilidades de desbordamiento se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a utilizar la API de utilidades.

scss/_utilities.scss (opens in a new tab)

scss/_utilities.scss
"overflow": (
  property: overflow,
  values: auto hidden visible scroll,
),
"overflow-x": (
  property: overflow-x,
  values: auto hidden visible scroll,
),
"overflow-y": (
  property: overflow-y,
  values: auto hidden visible scroll,
),