---
url: 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/customization/utility-classes'
title: 'Classes utilitaires | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T10:59:52+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Chaque élément a un champ HTML classes avec une liste de classes nommées. Les utilitaires Bootstrap 5 et les ombres portées sont intégrés. Votre thème peut ajouter son propre groupe via son .info.yml, et un module via un hook de modification. Cette page explique ce que la liste contient et comment enregistrer vos propres classes, pour que les contributeurs choisissent un aspect de marque par son nom au lieu de saisir des noms de classe.'
tags:
  - 'Je huisstijl toepassen'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T10:59:52+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Classes utilitaires'
      description: 'Chaque élément a un champ HTML classes avec une liste de classes nommées. Les utilitaires Bootstrap 5 et les ombres portées sont intégrés. Votre thème peut ajouter son propre groupe via son .info.yml, et un module via un hook de modification. Cette page explique ce que la liste contient et comment enregistrer vos propres classes, pour que les contributeurs choisissent un aspect de marque par son nom au lieu de saisir des noms de classe.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T10:59:52+0000'
      dateModified: '2026-10-24T10:59:52+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/customization/utility-classes'
      articleSection: 'Je huisstijl toepassen'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/customization/utility-classes'
      description: 'Chaque élément a un champ HTML classes avec une liste de classes nommées. Les utilitaires Bootstrap 5 et les ombres portées sont intégrés. Votre thème peut ajouter son propre groupe via son .info.yml, et un module via un hook de modification. Cette page explique ce que la liste contient et comment enregistrer vos propres classes, pour que les contributeurs choisissent un aspect de marque par son nom au lieu de saisir des noms de classe.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Accueil
            item: 'https://dxpr.com/fr'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: fr
---
[Help Center](/fr/hc)/[Documentation](/fr/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/hc/documentation/learn-dxpr-builder/customization) # Classes utilitaires.

 Learn DXPR BuilderManage the siteJe huisstijl toepassen

   ## In this guide

 Related guides

- [Styliser le contenu du builder avec le CSS de votre thème](/fr/hc/documentation/learn-dxpr-builder/customization/custom-css)
- [Ajouter les styles de marque et les boutons à l’éditeur de texte](/fr/hc/documentation/learn-dxpr-builder/customization/text-editor)
- [Référence de l’API des hooks](/fr/hc/documentation/learn-dxpr-builder/development/hooks-api)

Chaque élément a un champ **HTML classes** avec une liste de classes nommées. Les utilitaires Bootstrap 5 et les ombres portées sont intégrés. Votre thème peut ajouter son propre groupe via son `.info.yml`, et un module via un hook de modification. Cette page explique ce que la liste contient et comment enregistrer vos propres classes, pour que les contributeurs choisissent un aspect de marque par son nom au lieu de saisir des noms de classe.

## Appliquer une classe

1. Ouvrez les réglages de l’élément et trouvez **HTML classes** en bas du panneau **General**.
2. Cliquez sur la zone et choisissez une classe dans la liste. Saisir dans la zone filtre la liste.
3. Pour saisir une classe hors liste, cliquez sur **Edit as text** et saisissez-la.
4. Cliquez sur **Save** dans le dialogue, puis sur **Save** sur la barre d’outils du builder.

Les classes entrent dans l’attribut `class` de l’élément dans le HTML enregistré. [HTML ID and classes](/hc/documentation/learn-dxpr-builder/element-settings/custom-css) guide les contributeurs dans les usages courants.

## Ce que la liste contient

L’éditeur construit la liste à son démarrage. Il fusionne trois sources dans cet ordre :

1. La liste intégrée. Elle contient un groupe **Drop shadows**, un court groupe **Bootstrap classes** et les utilitaires Bootstrap 5, regroupés par fonction : **Display & Visibility**, **Responsive Visibility**, **Margins**, **Padding**, **Text Colors** et autres.
2. Un groupe pour chaque thème installé dont le `.info.yml` a une clé `dxpr_builder_classes`. Le groupe porte le nom du thème.
3. Les changements des modules, voir [Enregistrer des classes depuis un module](#register-classes-from-a-module).

Chaque site a donc des classes d’espacement, comme `mt-3` et `px-4`, d’affichage, comme `d-none`, et de texte, comme `text-center` et `fw-bold`. Vous ne configurez rien pour elles.

## Enregistrer des classes dans un thème

Ajoutez un mapping `dxpr_builder_classes` au `.info.yml` du thème. Chaque clé est un nom de classe, ou plusieurs séparés par des espaces ; chaque valeur est le libellé vu par les contributeurs. DXPR Theme enregistre ses classes ainsi :

```yaml
dxpr_builder_classes:
  dxpr-theme-form-inline: 'Inline Form'
  dxpr-theme-util-background-accent1: 'Background color: DXPR Theme accent1'
  dxpr-theme-util-border-accent1: 'Border color: DXPR Theme accent1'

```

1. Ajoutez le mapping à `themes/custom/mytheme/mytheme.info.yml` :

    ```yaml
    dxpr_builder_classes:
      brand-card: 'Brand card'
      brand-card shadow-lg: 'Brand card with shadow'

    ```
2. Écrivez le CSS des classes dans une bibliothèque chargée par le thème sur chaque page ; voir [CSS personnalisé](/hc/documentation/learn-dxpr-builder/customization/custom-css).
3. Videz les caches avec `drush cr`, pour que Drupal relise le fichier info.
4. Ouvrez les réglages d’un élément et vérifiez que **HTML classes** montre un groupe au nom de votre thème avec les deux entrées.

Chaque thème installé avec la clé ajoute son groupe, pas seulement le thème par défaut. Le groupe porte toujours le nom du thème ; le fichier info ne peut pas le renommer.

## Enregistrer des classes depuis un module

Un module personnalisé peut ajouter des classes, ou retirer des classes enregistrées par un thème, avec un hook de modification. Il ne peut pas retirer les entrées Bootstrap intégrées, car l’éditeur les ajoute dans le navigateur. Le code est sur [Référence de l’API des hooks](/hc/documentation/learn-dxpr-builder/development/hooks-api#hook_dxpr_builder_classes_alter).

## Version de Bootstrap

La liste intégrée est en Bootstrap 5. Si votre thème ne charge pas Bootstrap 5, réglez **Sideload Bootstrap files** sur **Bootstrap 5** sous **Bootstrap** sous **DXPR Studio** > **DXPR Builder** > **General Settings**, pour que les classes aient du CSS derrière elles. Voir [Performance](/hc/documentation/learn-dxpr-builder/advanced/performance#bootstrap-sideloading) pour ce que cela charge.

## Si vous ne voyez pas vos classes

- **Le groupe de votre thème manque dans HTML classes.** Drupal utilise toujours l’ancienne copie du fichier info du thème. Cliquez sur **Clear all caches** sous **Configuration** > **Development** > **Performance** (`/admin/config/development/performance`), ou exécutez `drush cr`.
- **Un thème avec la clé n’ajoute aucun groupe.** Seuls les thèmes installés comptent. Installez le thème sous **Appearance** (`/admin/appearance`) ; il n’a pas besoin d’être le thème par défaut.
- **L’élément semble pareil après avoir choisi une classe.** Aucun CSS pour cette classe ne se charge sur la page. Ajoutez les règles à une bibliothèque chargée par votre thème, voir [CSS personnalisé](/hc/documentation/learn-dxpr-builder/customization/custom-css). Pour les classes Bootstrap, voir [Version de Bootstrap](#bootstrap-version).

## Et ensuite ?

- [CSS personnalisé](/hc/documentation/learn-dxpr-builder/customization/custom-css) : écrire les règles derrière vos classes.
- [Éditeur de texte](/hc/documentation/learn-dxpr-builder/customization/text-editor) : proposer des classes pour paragraphes et mots dans la liste **Styles**.
- [Référence de l’API des hooks](/hc/documentation/learn-dxpr-builder/development/hooks-api) : les autres hooks fournis par DXPR Builder.