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-left">Esempio di float a sinistra per tutte le dimensioni</div><br>
<div class="float-right">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 sinistra per dimensioni SM (small) o maggiori.

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

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

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

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

Di seguito l’elenco completo delle classi a disposizione:

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