CSS-klassereferentie.

DXPR Builder lerenReferentieElementen en CSS

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

Selecteer het element.
Open More > Settings.
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-<type>` instead
`.az-<type>`	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:

<!-- Visible only on mobile -->
<div class="d-block d-md-none">Mobile content</div>

<!-- Visible only on desktop -->
<div class="d-none d-md-block">Desktop content</div>

Voeg deze klassen toe in het veld HTML-klassen van het element (in de sectie Algemeen van de instellingen) om responsieve zichtbaarheid te regelen.