Saltar al contenido principal Saltar a la navegación de la documentación

Alterna la flotación de cualquier elemento, a través de cualquier punto de interrupción, usando nuestras utilidades flotantes responsive.

Descripción general

Estas clases de utilidad hacen flotar un elemento hacia la izquierda o hacia la derecha, o deshabilitan la flotación, según el tamaño actual del viewport usando propiedad CSS float. Se incluye !important para evitar problemas de especificidad. Estos utilizan los mismos puntos de interrupción del viewport que nuestro sistema de cuadrícula. Ten en cuenta que las utilidades flotantes no tienen ningún efecto sobre los elementos flexibles.

Float start en todos los tamaños de viewport

Float end en todos los tamaños de viewport

No flotar 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>

Utiliza el ayudante clearfix en un elemento principal para borrar los elementos flotantes.

Responsive

También existen variaciones responsive para cada valor float.

Float end en viewports de tamaño SM (pequeño) o más ancho.

Float end en viewports de tamaño MD (mediano) o más ancho.

Float end en viewports de tamaño LG (grande) o más anchas.

Float end en viewports de tamaño XL (extra grande) o más anchas.

Float end en viewports de tamaño XXL (extra extra grande) o más anchas.

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

Aquí están todas las clases de apoyo:

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

CSS

API de utilidades de Sass

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

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