Flutuador

Alterne floats em qualquer elemento, em qualquer ponto de interrupção, usando nossos utilitários float responsivos.

Nesta página

Visão geral

Essas classes de utilitário flutuam um elemento para a esquerda ou direita, ou desativam a flutuação, com base no tamanho da janela de visualização atual usando a propriedade CSSfloat . !importantestá incluído para evitar problemas de especificidade. Eles usam os mesmos pontos de interrupção da viewport que nosso sistema de grade. Por favor, esteja ciente de que os utilitários float não têm efeito em itens flexíveis.

Início flutuante em todos os tamanhos de janela de visualização

Extremidade flutuante em todos os tamanhos de janela de visualização

Não flutue em todos os tamanhos de viewport

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

Responsivo

Também existem variações responsivas para cada floatvalor.

Float start em viewports de tamanho SM (pequeno) ou maior

Float start em viewports de tamanho MD (médio) ou mais largo

Float start em viewports de tamanho LG (grande) ou maior

Float start em viewports de tamanho XL (extra-grande) ou mais largo

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

Aqui estão todas as classes de suporte:

.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 utilitários

Os utilitários flutuantes são declarados em nossa API de utilitários em scss/_utilities.scss. Saiba como usar a API de utilitários.

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