Skip to main content

Float

Gestisci i float di qualsiasi elemento con le classi apposite.

Queste classi permettono di dare a un elemento la proprietà float a sinistra, a destra o di disabilitarlo.

!important è incluso nelle classi per evitare problemi di ereditarietà pregressa.

Classi

Attiva o disattiva il float con le seguenti classi:

Esempio di float a sinistra per tutte le dimensioni

Esempio di float a destra per tutte le dimensioni

Float disattivo per tutte le dimensioni
<div class="float-start">Esempio di float a sinistra per tutte le dimensioni</div><br />
<div class="float-end">Esempio di float a destra per tutte le dimensioni</div><br />
<div class="float-none">Float disattivo per tutte le dimensioni</div>

Responsive

Esistono variazioni delle classi float per i vari tipi di dimensione dello schermo.

Esempio di float a destra per dimensioni SM (small) o maggiori.

Esempio di float a destra per dimensioni MD (medium) o maggiori.

Esempio di float a destra per dimensioni LG (large) o maggiori.

Esempio di float a destra per dimensioni XL (extra-large) o maggiori.

Esempio di float a destra per dimensioni XXL (extra-extra-large) o maggiori.
<div class="float-sm-end">Esempio di float a destra per dimensioni SM (small) o maggiori.</div><br />
<div class="float-md-end">Esempio di float a destra per dimensioni MD (medium) o maggiori.</div><br />
<div class="float-lg-end">Esempio di float a destra per dimensioni LG (large) o maggiori.</div><br />
<div class="float-xl-end">Esempio di float a destra per dimensioni XL (extra-large) o maggiori.</div><br />
<div class="float-xxl-end">Esempio di float a destra per dimensioni XXL (extra-extra-large) o maggiori.</div>

Di seguito l’elenco completo delle classi a disposizione:

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