Float

Alterna floats en cualquier elemento, en cualquier breakpoint, usando nuestras utilidades responsivas de float.

On this page

Descripción general

Estas clases utilitarias flotan un elemento a la izquierda o derecha, o desactivan la flotación, según el tamaño actual del viewport usando la propiedad CSS float. Se incluye !important para evitar problemas de especificidad. Estas usan los mismos breakpoints de viewport que nuestro sistema de cuadrícula. Ten en cuenta que las utilidades de float no tienen efecto en los elementos flex.

Float al inicio en todos los tamaños de viewport

Float al final en todos los tamaños de viewport

Sin float en todos los tamaños de viewport

html

<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Responsive

También existen variaciones responsivas para cada valor de float.

Float al inicio en viewports de tamaño SM (small) o más anchos

Float al inicio en viewports de tamaño MD (medium) o más anchos

Float al inicio en viewports de tamaño LG (large) o más anchos

Float al inicio en viewports de tamaño XL (extra-large) o más anchos

html

<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>

Aquí están todas las clases soportadas:

.float-start
.float-end
.float-none
.float-sm-start
.float-sm-end
.float-sm-none
.float-md-start
.float-md-end
.float-md-none
.float-lg-start
.float-lg-end
.float-lg-none
.float-xl-start
.float-xl-end
.float-xl-none
.float-xxl-start
.float-xxl-end
.float-xxl-none

Sass

API de utilidades

Las utilidades de float se declaran en nuestra utilities API en scss/_utilities.scss. Aprende a usar la utilities API.

    "float": (
      responsive: true,
      property: float,
      values: (
        start: left,
        end: right,
        none: none,
      )
    ),