Source

Flutuador

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

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. Esteja ciente de que os utilitários float não afetam os itens flexíveis.

Aulas

Alternar um float com uma classe:

Flutuar para a esquerda em todos os tamanhos de janela de visualização

Flutuar à direita em todos os tamanhos de janela de visualização

Não flutue em todos os tamanhos de viewport 
<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Mixins

Ou por Sass mixin:

.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

Responsivo

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

Flutuar para a esquerda em viewports de tamanho SM (pequeno) ou maior

Flutuar para a esquerda em viewports de tamanho MD (médio) ou mais largo

Flutuar para a esquerda em viewports de tamanho LG (grande) ou maior

Flutuar para a esquerda em viewports de tamanho XL (extra-grande) ou mais largo 

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

Aqui estão todas as classes de suporte;

  • .float-left
  • .float-right
  • .float-none
  • .float-sm-left
  • .float-sm-right
  • .float-sm-none
  • .float-md-left
  • .float-md-right
  • .float-md-none
  • .float-lg-left
  • .float-lg-right
  • .float-lg-none
  • .float-xl-left
  • .float-xl-right
  • .float-xl-none