--- url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/referentie/css-klassen' title: 'CSS-klassereferentie | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:03:00+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- DXPR Builder-inhoud gebruikt Bootstrap 5-klassen naast enkele eigen klassen. Deze referentie toont degene die je het waarschijnlijkst gebruikt of met CSS target. 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-24T04:03:00+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: CSS-klassereferentie description: |- DXPR Builder-inhoud gebruikt Bootstrap 5-klassen naast enkele eigen klassen. Deze referentie toont degene die je het waarschijnlijkst gebruikt of met CSS target. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:03:00+0000' dateModified: '2026-10-24T04:03:00+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/referentie/css-klassen' articleSection: 'Elementen en CSS' - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/referentie/css-klassen' description: |- DXPR Builder-inhoud gebruikt Bootstrap 5-klassen naast enkele eigen klassen. Deze referentie toont degene die je het waarschijnlijkst gebruikt of met CSS target. 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) /[Referentie](/nl/hc/documentation/learn-dxpr-builder/reference) /[Elementen en CSS](/nl/hc/documentation/learn-dxpr-builder/reference/elements-and-css) # CSS-klassereferentie. DXPR Builder lerenReferentieElementen en CSS ## In deze gids DXPR Builder-inhoud gebruikt Bootstrap 5-klassen naast enkele eigen klassen. Deze referentie toont degene die je het waarschijnlijkst gebruikt of met CSS target. ## Aangepaste klassen toevoegen 1. Selecteer het element. 2. Open **More > Settings**. 3. Kies in de sectie **Algemeen** klassen in het veld **HTML-klassen**. Om een klassenaam te typen, klik op **Bewerken als tekst** en scheid klassen met spaties. ## Bootstrap-rasterklassen ### Containerklassen | Klasse | Beschrijving | |---|---| | `.container` | Container met vaste breedte, gecentreerd | | `.container-fluid` | Container over volledige breedte | ### Rij- en kolomklassen | Klasse | Beschrijving | |---|---| | `.row` | Flexcontainer voor kolommen | | `.col-{n}` | Kolom van n/12 van de rij | | `.col-sm-{n}` | Kolombreedte bij small (576px+) | | `.col-md-{n}` | Kolombreedte bij medium (768px+) | | `.col-lg-{n}` | Kolombreedte bij large (992px+) | | `.col-xl-{n}` | Kolombreedte bij XL (1200px+) | ## Bootstrap-witruimtehulpprogramma’s ### Marge | Klasse | Beschrijving | |---|---| | `.m-{0-5}` | Marge aan alle zijden | | `.mt-{0-5}` | Marge boven | | `.mb-{0-5}` | Marge onder | | `.ms-{0-5}` | Marge begin (links in LTR) | | `.me-{0-5}` | Marge einde (rechts in LTR) | | `.mx-{0-5}` | Marge links en rechts | | `.my-{0-5}` | Marge boven en onder | ### Opvulling | Klasse | Beschrijving | |---|---| | `.p-{0-5}` | Opvulling aan alle zijden | | `.pt-{0-5}` | Opvulling boven | | `.pb-{0-5}` | Opvulling onder | | `.ps-{0-5}` | Opvulling begin | | `.pe-{0-5}` | Opvulling einde | | `.px-{0-5}` | Opvulling links en rechts | | `.py-{0-5}` | Opvulling boven en onder | ## Bootstrap-teksthulpprogramma’s | Klasse | Beschrijving | |---|---| | `.text-start` | Links uitgelijnde tekst | | `.text-center` | Gecentreerd uitgelijnde tekst | | `.text-end` | Rechts uitgelijnde tekst | | `.fw-bold` | Vette tekst | | `.fw-light` | Lichte tekst | | `.fst-italic` | Cursieve tekst | | `.text-uppercase` | Tekst in hoofdletters | | `.text-lowercase` | Tekst in kleine letters | | `.fs-1` to `.fs-6` | Lettergrootte (1 grootste) | ## Bootstrap-kleurhulpprogramma’s ### Tekstkleuren | Klasse | Beschrijving | |---|---| | `.text-primary` | Primaire themakleur | | `.text-secondary` | Secundaire themakleur | | `.text-success` | Groen (succes) | | `.text-danger` | Rood (gevaar/fout) | | `.text-warning` | Geel (waarschuwing) | | `.text-info` | Cyaan (informatie) | | `.text-muted` | Grijze gedempte tekst | | `.text-white` | Witte tekst | ### Achtergrondkleuren | Klasse | Beschrijving | |---|---| | `.bg-primary` | Primaire achtergrond | | `.bg-secondary` | Secundaire achtergrond | | `.bg-success` | Groene achtergrond | | `.bg-danger` | Rode achtergrond | | `.bg-warning` | Gele achtergrond | | `.bg-info` | Cyaanachtergrond | | `.bg-light` | Lichtgrijze achtergrond | | `.bg-dark` | Donkere achtergrond | ## Bootstrap-weergavehulpprogramma’s | Klasse | Beschrijving | |---|---| | `.d-none` | Element verbergen | | `.d-block` | Blokweergave | | `.d-inline` | Inlineweergave | | `.d-sm-none` | Verbergen bij small+ | | `.d-md-block` | Tonen bij medium+ | | `.d-lg-none` | Verbergen bij large+ | ## DXPR Builder-klassen ### Elementklassen | Klasse | Beschrijving | |---|---| | `.az-element` | Basisklasse op de meeste inhoudselementen; Knop en Afbeelding hebben hem niet, dus target `.az-` instead | | `.az-` | Eén klasse per elementtype, zoals `.az-text`, `.az-image` or `.az-images-carousel`; Social Links gebruikt `.st-social` | | `.az-section` | Sectie-element | | `.row` | Rij-element (Bootstrap); inhoud uit oudere versies kan ook `.az-row` | | `.col-*` | Kolomelement (Bootstrap); inhoud uit oudere versies kan ook `.az-column` | ### Animatieklassen Animaties gebruiken de animate.css-naamgeving. Terwijl een element animeert heeft het: | Klasse | Beschrijving | |---|---| | `.animated` | Toegevoegd terwijl de animatie draait | | `.infinite` | Toegevoegd wanneer **Oneindig** aan staat | | Animatienaam, zoals `.fadeIn` | Het effect **Animatie in** of **Animatie uit** dat wordt afgespeeld | ### Variantklassen | Klasse | Beschrijving | |---|---| | `.az-variant-container` | A/B-testcontainer, samen met `.rl-experiment` | | `.az-variant-wrapper` | Elke variantarm | | `.az-variant-original` | De originele arm (A) | | `.az-variant-1`, `.az-variant-2` | Armen B, C enzovoort | | `.az-variant-active` | De arm die nu wordt getoond | ## Klassen gebruiken voor responsieve zichtbaarheid Combineer Bootstrap-weergavehulpprogramma’s om inhoud te tonen of te verbergen bij specifieke schermgroottes: ```html
Mobile content
Desktop content
``` Voeg deze klassen toe in het veld **HTML-klassen** van het element (in de sectie **Algemeen** van de instellingen) om responsieve zichtbaarheid te regelen.