---
url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/aanpassing/utility-klassen'
title: 'Utility-klassen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T06:18:49+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Elk element heeft een veld HTML classes met een lijst van benoemde klassen. Bootstrap
  5-utilities en slagschaduwen zijn ingebouwd. Je thema kan een eigen groep toevoegen via zijn
  .info.yml, en een module via een alter hook. Deze pagina legt uit wat de lijst bevat en hoe je je
  eigen klassen registreert, zodat redacteurs een merklook op naam kiezen in plaats van klassennamen te
  typen.
tags:
  - 'Match your brand'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: Utility-klassen
      description: |-
        Elk element heeft een veld HTML classes met een lijst van benoemde klassen. Bootstrap
        5-utilities en slagschaduwen zijn ingebouwd. Je thema kan een eigen groep toevoegen via zijn
        .info.yml, en een module via een alter hook. Deze pagina legt uit wat de lijst bevat en hoe je je
        eigen klassen registreert, zodat redacteurs een merklook op naam kiezen in plaats van klassennamen te
        typen.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T06:18:49+0000'
      dateModified: '2026-10-24T17:19:22+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/nl/hc/documentatie/dxpr-builder-leren/aanpassing/utility-klassen'
      articleSection: 'Je huisstijl toepassen'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/aanpassing/utility-klassen'
      description: |-
        Elk element heeft een veld HTML classes met een lijst van benoemde klassen. Bootstrap
        5-utilities en slagschaduwen zijn ingebouwd. Je thema kan een eigen groep toevoegen via zijn
        .info.yml, en een module via een alter hook. Deze pagina legt uit wat de lijst bevat en hoe je je
        eigen klassen registreert, zodat redacteurs een merklook op naam kiezen in plaats van klassennamen te
        typen.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/nl'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: nl
---
[Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[De site beheren](/nl/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/nl/hc/documentation/learn-dxpr-builder/customization) # Utility-klassen.

 DXPR Builder lerenDe site beherenJe huisstijl toepassen

   ## In deze gids

 Gerelateerde gidsen

- [Geef builderinhoud stijl met de CSS van je thema](/nl/hc/documentatie/dxpr-builder-leren/aanpassing/aangepaste-css)
- [Voeg merkstijlen en knoppen toe aan de teksteditor](/nl/hc/documentatie/dxpr-builder-leren/aanpassing/teksteditor)
- [Hooks API](/nl/hc/documentatie/dxpr-builder-leren/ontwikkeling/hooks-api)

Elk element heeft een veld **HTML classes** met een lijst van benoemde klassen. Bootstrap 5-utilities en slagschaduwen zijn ingebouwd. Je thema kan een eigen groep toevoegen via zijn `.info.yml`, en een module via een alter hook. Deze pagina legt uit wat de lijst bevat en hoe je je eigen klassen registreert, zodat redacteurs een merklook op naam kiezen in plaats van klassennamen te typen.

## Een klasse toepassen

1. Open de instellingen van het element en vind **HTML classes** onderaan het paneel **General**.
2. Klik op het vak en kies een klasse uit de lijst. Typen in het vak filtert de lijst.
3. Om een klasse in te voeren die niet in de lijst staat, klik je op **Edit as text** en typ je hem.
4. Klik in het dialoogvenster op **Save** en daarna op **Save** op de builderwerkbalk.

De klassen komen in het attribuut `class` van het element in de opgeslagen HTML. [HTML ID en klassen](/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/aangepaste-css) loodst redacteurs door veelvoorkomend gebruik.

## Wat de lijst bevat

De editor bouwt de lijst wanneer hij start. Hij voegt drie bronnen samen in deze volgorde:

1. De ingebouwde lijst. Die heeft een groep **Drop shadows**, een korte groep **Bootstrap classes** en de Bootstrap 5-utilities, gegroepeerd per taak: **Display & Visibility**, **Responsive Visibility**, **Margins**, **Padding**, **Text Colors** en meer.
2. Een groep voor elk geïnstalleerd thema waarvan de `.info.yml` een sleutel `dxpr_builder_classes` heeft. De groep is gelabeld met de naam van het thema.
3. Wijzigingen van modules; zie [Klassen registreren vanuit een module](#register-classes-from-a-module).

Elke site heeft dus klassen voor ruimte, zoals `mt-3` en `px-4`, voor weergave, zoals `d-none`, en voor tekst, zoals `text-center` en `fw-bold`. Je stelt er niets voor in.

## Klassen registreren in een thema

Voeg een `dxpr_builder_classes`-mapping toe aan de `.info.yml` van het thema. Elke sleutel is een klassenaam, of meerdere gescheiden door spaties; elke waarde is het label dat redacteurs zien. DXPR Theme registreert zijn klassen zo:

```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. Voeg de mapping toe aan `themes/custom/mytheme/mytheme.info.yml`:

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

    ```
2. Schrijf de CSS voor de klassen in een library die het thema op elke pagina laadt; zie [Aangepaste CSS](/nl/hc/documentatie/dxpr-builder-leren/aanpassing/aangepaste-css).
3. Wis de caches met `drush cr`, zodat Drupal het infobestand opnieuw leest.
4. Open de instellingen van een element en controleer of **HTML classes** een groep met de naam van je thema en de twee vermeldingen toont.

Elk geïnstalleerd thema met de sleutel voegt zijn groep toe, niet alleen het standaardthema. De groep draagt altijd de naam van het thema; het infobestand kan hem niet hernoemen.

## Klassen registreren vanuit een module

Een aangepaste module kan klassen toevoegen, of klassen verwijderen die een thema heeft geregistreerd, met een alter hook. De ingebouwde Bootstrap-vermeldingen kan hij niet verwijderen, omdat de editor die in de browser toevoegt. De code staat op [Hooks API-referentie](/nl/hc/documentatie/dxpr-builder-leren/ontwikkeling/hooks-api#hook_dxpr_builder_classes_alter).

## Bootstrap-versie

De ingebouwde lijst is Bootstrap 5. Als je thema geen Bootstrap 5 laadt, zet je **Sideload Bootstrap files** op **Bootstrap 5** onder **Bootstrap** bij **DXPR Studio** > **DXPR Builder** > **General Settings**, zodat de klassen CSS erachter hebben. Zie [Performance](/nl/hc/documentatie/dxpr-builder-leren/geavanceerd/prestaties#bootstrap-sideloading) voor wat dat laadt.

## Als je je klassen niet ziet

- **De groep van je thema ontbreekt in HTML classes.** Drupal gebruikt nog de oude kopie van het infobestand van het thema. Klik op **Clear all caches** bij **Configuration** > **Development** > **Performance** (`/admin/config/development/performance`), of draai `drush cr`.
- **Een thema met de sleutel voegt geen groep toe.** Alleen geïnstalleerde thema's tellen. Installeer het thema bij **Appearance** (`/admin/appearance`); het hoeft niet het standaardthema te zijn.
- **Het element ziet er hetzelfde uit nadat je een klasse hebt gekozen.** Er laadt geen CSS voor die klasse op de pagina. Voeg de regels toe aan een library die je thema laadt; zie [Aangepaste CSS](/nl/hc/documentatie/dxpr-builder-leren/aanpassing/aangepaste-css). Voor Bootstrap-klassen, zie [Bootstrap-versie](#bootstrap-version).

## Wat nu?

- [Aangepaste CSS](/nl/hc/documentatie/dxpr-builder-leren/aanpassing/aangepaste-css): schrijf de regels achter je klassen.
- [Teksteditor](/nl/hc/documentation/learn-dxpr-builder/customization/text-editor): bied klassen voor alinea's en woorden aan in de lijst **Styles**.
- [Hooks API-referentie](/nl/hc/documentatie/dxpr-builder-leren/ontwikkeling/hooks-api): de andere hooks die DXPR Builder biedt.