Utilitaires

Dimensionnement

Les classes w-*, h-* et leurs cousines fixent la largeur ou la hauteur d’un élément en pourcentage de son parent, ou en unités de la fenêtre.

Largeurs relatives#

Les largeurs w-25, w-50, w-75, w-100 et w-auto sont calculées par rapport au parent.

w-25

w-50

w-75

w-100

w-auto

<div class="w-25 p-3 text-bg-primary mb-2">w-25</div>
<div class="w-50 p-3 text-bg-primary mb-2">w-50</div>
<div class="w-75 p-3 text-bg-primary mb-2">w-75</div>
<div class="w-100 p-3 text-bg-primary mb-2">w-100</div>
<div class="w-auto p-3 text-bg-primary">w-auto</div>

Hauteurs relatives#

La hauteur en pourcentage exige que le parent ait lui-même une hauteur définie.

h-25

h-50

h-75

h-100

h-auto

<div class="bg-body-secondary border d-flex gap-2 p-2" style="height: 12rem">
  <div class="h-25 p-2 text-bg-primary">h-25</div>
  <div class="h-50 p-2 text-bg-primary">h-50</div>
  <div class="h-75 p-2 text-bg-primary">h-75</div>
  <div class="h-100 p-2 text-bg-primary">h-100</div>
  <div class="h-auto p-2 text-bg-primary">h-auto</div>
</div>

Dimensions maximales#

mw-100 et mh-100 empêchent un élément de dépasser son parent. C’est utile pour une image dont la taille d’origine est plus grande que la colonne.

Largeur 20 rem plafonnée par mw-100

<div class="bg-body-secondary border p-3" style="width: 12rem">
  <div class="mw-100 p-2 text-bg-primary text-nowrap overflow-hidden" style="width: 20rem">Largeur 20 rem plafonnée par mw-100</div>
</div>

Unités de la fenêtre#

vw-100 et vh-100 occupent toute la largeur ou toute la hauteur de la fenêtre ; min-vw-100 et min-vh-100 fixent un minimum. Typique pour une page de connexion pleine hauteur.

<main class="min-vh-100 d-flex align-items-center justify-content-center">
  <p class="mb-0">Connexion à l'espace client</p>
</main>
<div class="vw-100">Occupe toute la largeur de la fenêtre.</div>
<div class="vh-100">Occupe toute la hauteur de la fenêtre.</div>

Classes disponibles

Ces classes ne sont pas déclinées par point de rupture. Pour des largeurs adaptatives, utilisez la grille.

Classes disponibles
Classe	Propriété CSS
`w-25`, `w-50`, `w-75`, `w-100`	`width` : 25 %, 50 %, 75 %, 100 %
`w-auto`	`width: auto`
`h-25`, `h-50`, `h-75`, `h-100`	`height` : 25 %, 50 %, 75 %, 100 %
`h-auto`	`height: auto`
`mw-100`	`max-width: 100%`
`mh-100`	`max-height: 100%`
`vw-100`	`width: 100vw`
`min-vw-100`	`min-width: 100vw`
`vh-100`	`height: 100vh`
`min-vh-100`	`min-height: 100vh`

Ajouter d’autres valeurs en Sass#

Les tailles viennent de l’API des utilitaires (voir API des utilitaires). Étendez-la pour générer une classe supplémentaire, comme w-33.

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (33: 33.333%),
        ),
      ),
    ),
  )
);

Bonnes pratiques

À faire

Préférez min-vh-100 à vh-100 pour une page pleine hauteur : le contenu long peut ainsi dépasser sans être coupé.
Utilisez mw-100 sur les images qui doivent rester dans leur colonne (ou la classe img-fluid).

À éviter

Évitez vw-100 pour un conteneur : la largeur de la barre de défilement est incluse et provoque un défilement horizontal.

Accessibilité

Vérifiez le rendu avec un zoom de 200 % : une hauteur fixe peut couper le texte agrandi.