Utilitaires

Flottement

Les classes float-* placent un élément à gauche ou à droite et laissent le texte l’entourer. Elles sont responsives et utiles pour de petites images ou des encarts dans un texte.

Flotter à gauche ou à droite#

float-start aligne à gauche, float-end à droite et float-none annule le flottement. Le conteneur reçoit clearfix pour englober les éléments flottants.

Flottant à gauche

Flottant à droite

Sans flottement

<div class="bg-body-secondary border p-3 clearfix mb-3">
  <div class="float-start bg-body border p-2">Flottant à gauche</div>
  <div class="float-end bg-body border p-2">Flottant à droite</div>
</div>
<div class="bg-body-secondary border p-3 clearfix">
  <div class="float-none bg-body border p-2">Sans flottement</div>
</div>

Texte autour d’un élément#

Carte Visa

Votre carte est valable trois ans. Vous pouvez la bloquer à tout moment depuis votre espace client, modifier ses plafonds de paiement et de retrait, ou demander son renouvellement dans l'agence de votre choix. Le texte entoure l'encart flottant, puis reprend toute la largeur dessous.

<div class="bg-body-secondary border p-3 clearfix">
  <div class="float-start bg-body border p-3 me-3 mb-2">Carte Visa</div>
  <p class="mb-0">Votre carte est valable trois ans. Vous pouvez la bloquer à tout moment depuis votre espace client, modifier ses plafonds de paiement et de retrait, ou demander son renouvellement dans l'agence de votre choix. Le texte entoure l'encart flottant, puis reprend toute la largeur dessous.</p>
</div>

Flottement responsive#

Chaque classe accepte un suffixe de point de rupture. Ici, l’élément reste dans le flux jusqu’à 768 px, puis flotte à droite.

Solde : 2 450 000 FCFA

Sur mobile, le solde s'affiche au-dessus. À partir de 768 px, il passe à droite du texte.

<div class="bg-body-secondary border p-3 clearfix">
  <div class="float-none float-md-end bg-body border p-2 mb-2">Solde : 2 450 000 FCFA</div>
  <p class="mb-0">Sur mobile, le solde s'affiche au-dessus. À partir de 768 px, il passe à droite du texte.</p>
</div>

Classes de flottement

Classes de flottement
Classe	Effet
`float-start`	`float: left`
`float-end`	`float: right`
`float-none`	`float: none`
`-sm`	`float-sm-start` `float-sm-end` `float-sm-none`
`-md`	`float-md-start` `float-md-end` `float-md-none`
`-lg`	`float-lg-start` `float-lg-end` `float-lg-none`
`-xl`	`float-xl-start` `float-xl-end` `float-xl-none`
`-xxl`	`float-xxl-start` `float-xxl-end` `float-xxl-none`

Variables Sass

Variables Sass
Variable	Rôle
`$utilities` (clé `"float"`)	Valeurs `start: left`, `end: right`, `none: none` et `responsive: true`. Mettez la clé à `null` pour supprimer la famille.
`$grid-breakpoints`	Largeurs des suffixes responsives.

Bonnes pratiques

À faire

Ajoutez clearfix au parent d’éléments flottants pour qu’il ne s’affaisse pas (page Aides, « Clearfix »).
Laissez une marge entre l’élément flottant et le texte (me-3, mb-2).
Pour aligner des éléments sur une ligne, préférez les utilitaires Flex.

À éviter

N’utilisez pas float-* pour la mise en page générale d’une page : la grille et Flex sont plus fiables.
N’attendez aucun effet de float-* sur un enfant direct d’un conteneur Flex ou d’une grille.
Ne laissez pas un élément flottant sans clearfix en parent si la suite doit rester dessous.

Accessibilité

Le flottement ne change pas l’ordre de lecture : le contenu est lu dans l’ordre du code.
Vérifiez que le texte autour d’un élément flottant reste lisible à 320 px de large et au zoom 200 %.