Utilitaires CSS pour contrôler la propriété display d'un élément.
Chaque classe est disponible en version de base et en version responsive suffixée par le nom du breakpoint,
générée via @each sur la map $breakpoints.
— aucun rendu (display: none)
Les classes suffixées (.d-block-md, .d-flex-sm…)
utilisent des media queries min-width. Elles s'activent à partir du breakpoint indiqué
et s'appliquent à toutes les tailles supérieures. Pour masquer un élément sur mobile uniquement,
combiner .d-none et .d-block-md.
Classes de base, sans condition de breakpoint.
| CLASSE | VALEUR | DESCRIPTION |
|---|---|---|
.d-none |
display: none |
Masque l'élément — supprimé du flux et invisible. |
.d-inline |
display: inline |
Élément en ligne — s'insère dans le flux textuel. |
.d-inline-block |
display: inline-block |
Élément en ligne acceptant largeur, hauteur et marges verticales. |
.d-block |
display: block |
Élément de bloc — occupe toute la largeur disponible. |
.d-flex |
display: flex |
Active le contexte flexbox sur l'élément. |
.d-inline-flex |
display: inline-flex |
Active le contexte flexbox en ligne — le conteneur reste dans le flux textuel. |
.d-grid |
display: grid |
Active le contexte de grille CSS sur l'élément. |
Chaque classe de base est déclinée en version responsive via
@each $key, $value in $breakpoints.
Le suffixe correspond au nom du breakpoint défini dans $breakpoints.
| PATTERN | MEDIA QUERY | CLASSES GÉNÉRÉES |
|---|---|---|
.d-none-{key} |
min-width: {value} |
Une classe par entrée de $breakpoints. |
.d-inline-{key} |
min-width: {value} |
Une classe par entrée de $breakpoints. |
.d-inline-block-{key} |
min-width: {value} |
Une classe par entrée de $breakpoints. |
.d-block-{key} |
min-width: {value} |
Une classe par entrée de $breakpoints. |
.d-flex-{key} |
min-width: {value} |
Une classe par entrée de $breakpoints. |
.d-inline-flex-{key} |
min-width: {value} |
Une classe par entrée de $breakpoints. |
.d-grid-{key} |
min-width: {value} |
Une classe par entrée de $breakpoints. |
Les classes responsive sont générées à la compilation Sass via
@each $key, $value in $breakpoints.
Les noms de suffixes disponibles dépendent exclusivement des clés déclarées dans
bp.$breakpoints.
Combiner une classe de base et une classe responsive pour gérer la visibilité selon la taille d'écran.
Exemple : .d-none .d-block-md masque l'élément sur mobile
et l'affiche à partir du breakpoint md.
Les media queries générées sont en min-width (approche
mobile-first). Une classe suffixée s'applique à partir du breakpoint indiqué
et reste active sur toutes les tailles supérieures — elle ne se limite pas à ce breakpoint seul.
.d-flex et .d-grid
activent uniquement leur contexte respectif.
La configuration des axes, colonnes et espacements doit être gérée séparément via les utilitaires dédiés.
Display · WEBDEV-UI DOCS / V1