Principe
Possibilité d'influer sur le flottement de bloc via des classes utilitaires.
Ces classes sont couplées avec les breakpoints.
Exemple
Float start on all viewport sizes
Float end on all viewport sizes
Don’t float on all viewport sizes
<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>
Mixins
Les mixins équivalentes existent côté scss.
.element {
@include float-start;
}
.another-element {
@include float-end;
}
.one-more {
@include float-none;
}
Responsive
Float end on viewports sized SM (small) or wider
Float end on viewports sized MD (medium) or wider
Float end on viewports sized LG (large) or wider
Float end on viewports sized XL (extra large) or wider
Float end on viewports sized XXL (extra extra large) or wider
<div class="float-sm-end">Float end on viewports sized SM (small) or wider</div><br> <div class="float-md-end">Float end on viewports sized MD (medium) or wider</div><br> <div class="float-lg-end">Float end on viewports sized LG (large) or wider</div><br> <div class="float-xl-end">Float end on viewports sized XL (extra large) or wider</div><br> <div class="float-xxl-end">Float end on viewports sized XXL (extra extra large) or wider</div><br>
Récapitulatif de toutes les possibilités
.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