Float

Descripción general

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

<div class="float-start">Float start en todos los tamaños de viewport</div><br>
<div class="float-end">Float end en todos los tamaños de viewport</div><br>
<div class="float-none">Don't float en todos los tamaños de viewport</div>

Responsive

También existen variaciones responsive para cada valor float.

<div class="float-sm-start">Float start en viewports de tamaño SM (small) o superior</div><br>
<div class="float-md-start">Float start en viewports de tamaño MD (medium) o superior</div><br>
<div class="float-lg-start">Float start en viewports de tamaño LG (large) o superior</div><br>
<div class="float-xl-start">Float start en viewports de tamaño XL (extra-large) o superior</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 flotantes se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a usar la API de utilidades.

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