--- url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/reference/classes-css' title: 'Référence des classes CSS | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:23:45+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Le contenu DXPR Builder utilise les classes Bootstrap 5 ainsi que quelques classes propres. Cette référence répertorie celles que vous utiliserez ou ciblerez en CSS le plus probablement.' tags: - 'Elements and CSS' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T14:23:45+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Référence des classes CSS' description: 'Le contenu DXPR Builder utilise les classes Bootstrap 5 ainsi que quelques classes propres. Cette référence répertorie celles que vous utiliserez ou ciblerez en CSS le plus probablement.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:23:45+0000' dateModified: '2026-10-24T14:23:45+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/apprendre-dxpr-builder/reference/classes-css' articleSection: 'Éléments et CSS' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/reference/classes-css' description: 'Le contenu DXPR Builder utilise les classes Bootstrap 5 ainsi que quelques classes propres. Cette référence répertorie celles que vous utiliserez ou ciblerez en CSS le plus probablement.' 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 --- [Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Référence](/fr/hc/documentation/learn-dxpr-builder/reference) /[Éléments et CSS](/fr/hc/documentation/learn-dxpr-builder/reference/elements-and-css) # Référence des classes CSS. Apprendre DXPR BuilderRéférenceÉléments et CSS ## Dans ce guide Le contenu DXPR Builder utilise les classes Bootstrap 5 ainsi que quelques classes propres. Cette référence répertorie celles que vous utiliserez ou ciblerez en CSS le plus probablement. ## Ajouter des classes personnalisées 1. Sélectionnez l’élément. 2. Ouvrez **Plus > Paramètres**. 3. Dans la section **General**, choisissez des classes dans le champ **HTML classes**. Pour saisir n’importe quel nom de classe, cliquez sur **Edit as text** et séparez les classes par des espaces. ## Classes de grille Bootstrap ### Classes de conteneur | Class | Description | |---|---| | `.container` | Conteneur centré à largeur fixe | | `.container-fluid` | Conteneur pleine largeur | ### Classes de lignes et de colonnes | Class | Description | |---|---| | `.row` | Conteneur flexible pour colonnes | | `.col-{n}` | Colonne couvrant n/12 de la ligne | | `.col-sm-{n}` | Largeur de colonne en petit (576px et plus) | | `.col-md-{n}` | Largeur de colonne en moyen (768px et plus) | | `.col-lg-{n}` | Largeur de colonne en grand (992px et plus) | | `.col-xl-{n}` | Largeur de colonne en très grand (1200px et plus) | ## Utilitaires d’espacement Bootstrap ### Marge extérieure | Class | Description | |---|---| | `.m-{0-5}` | Marge extérieure de tous les côtés | | `.mt-{0-5}` | Marge extérieure haute | | `.mb-{0-5}` | Marge extérieure basse | | `.ms-{0-5}` | Marge extérieure de début (gauche en LTR) | | `.me-{0-5}` | Marge extérieure de fin (droite en LTR) | | `.mx-{0-5}` | Marges extérieures gauche et droite | | `.my-{0-5}` | Marges extérieures haute et basse | ### Marge intérieure | Class | Description | |---|---| | `.p-{0-5}` | Marge intérieure de tous les côtés | | `.pt-{0-5}` | Marge intérieure haute | | `.pb-{0-5}` | Marge intérieure basse | | `.ps-{0-5}` | Marge intérieure de début | | `.pe-{0-5}` | Marge intérieure de fin | | `.px-{0-5}` | Marges intérieures gauche et droite | | `.py-{0-5}` | Marges intérieures haute et basse | ## Utilitaires de texte Bootstrap | Class | Description | |---|---| | `.text-start` | Texte aligné à gauche | | `.text-center` | Texte centré | | `.text-end` | Texte aligné à droite | | `.fw-bold` | Texte gras | | `.fw-light` | Texte de graisse légère | | `.fst-italic` | Texte italique | | `.text-uppercase` | Texte en majuscules | | `.text-lowercase` | Texte en minuscules | | `.fs-1` to `.fs-6` | Taille de police (1 la plus grande) | ## Utilitaires de couleur Bootstrap ### Couleurs de texte | Class | Description | |---|---| | `.text-primary` | Couleur primaire du thème | | `.text-secondary` | Couleur secondaire du thème | | `.text-success` | Vert (succès) | | `.text-danger` | Rouge (danger/erreur) | | `.text-warning` | Jaune (avertissement) | | `.text-info` | Cyan (information) | | `.text-muted` | Texte gris atténué | | `.text-white` | Texte blanc | ### Couleurs de fond | Class | Description | |---|---| | `.bg-primary` | Fond primaire | | `.bg-secondary` | Fond secondaire | | `.bg-success` | Fond vert | | `.bg-danger` | Fond rouge | | `.bg-warning` | Fond jaune | | `.bg-info` | Fond cyan | | `.bg-light` | Fond gris clair | | `.bg-dark` | Fond foncé | ## Utilitaires d’affichage Bootstrap | Class | Description | |---|---| | `.d-none` | Masquer l’élément | | `.d-block` | Affichage en bloc | | `.d-inline` | Affichage en ligne | | `.d-sm-none` | Masquer en petit et plus | | `.d-md-block` | Afficher en moyen et plus | | `.d-lg-none` | Masquer en grand et plus | ## Classes DXPR Builder ### Classes d’éléments | Class | Description | |---|---| | `.az-element` | Classe de base sur la plupart des éléments de contenu ; Button et Image ne la portent pas : ciblez plutôt `.az-` | | `.az-` | Une classe par type d’élément, par exemple `.az-text`, `.az-image` ou `.az-images-carousel` ; Social Links utilise `.st-social` | | `.az-section` | Élément Section | | `.row` | Élément Row (Bootstrap) ; le contenu des anciennes versions peut aussi avoir `.az-row` | | `.col-*` | Élément Column (Bootstrap) ; le contenu des anciennes versions peut aussi avoir `.az-column` | ### Classes d’animation Les animations utilisent la nomenclature animate.css. Pendant qu’un élément s’anime, il porte : | Class | Description | |---|---| | `.animated` | Ajoutée pendant que l’animation s’exécute | | `.infinite` | Ajoutée quand **Infinite** est activé | | Animation name, such as `.fadeIn` | L’effet **Animation in** ou **Animation out** en cours | ### Classes de variantes | Class | Description | |---|---| | `.az-variant-container` | Conteneur de test A/B, avec `.rl-experiment` | | `.az-variant-wrapper` | Chaque bras de variante | | `.az-variant-original` | Le bras d’origine (A) | | `.az-variant-1`, `.az-variant-2` | Les bras B, C, et ainsi de suite | | `.az-variant-active` | Le bras affiché actuellement | ## Utiliser les classes pour la visibilité responsive Combinez les utilitaires d’affichage Bootstrap pour afficher ou masquer du contenu à des tailles d’écran précises : ```html
Mobile content
Desktop content
``` Ajoutez ces classes dans le champ **HTML classes** de l’élément (dans la section **General** des réglages) pour contrôler la visibilité responsive.