Helpers diversen

Op deze pagina vindt u veel nuttige hulpmiddelen met wat uitleg.

Classes	Omschrijving
position-static	Maakt de positie van het element statisch
position-fixed-top	Maakt de positie van het element vast aan de top
position-fixed-bottom	Maakt de positie van het element vast aan de onderkant
position-relative	Maakt de positie van het element relatief
position-absolute	Maakt de positie van het element absoluut
position-absolute-top-left	Maakt de positie van het element absoluut links boven
position-absolute-top-center	Maakt de positie van het element absoluut gecentreerd boven
position-absolute-top-right	Maakt de positie van het element absoluut rechts boven

Classes	Omschrijving
position-absolute-middle-left	Maakt de positie van het element absoluut links midden
position-absolute-middle-center	Maakt de positie van het element absoluut gecentreerd midden
position-absolute-middle-right	Maakt de positie van het element absoluut rechts midden
position-absolute-bottom-left	Maakt de positie van het element absoluut links onder
position-absolute-bottom-center	Maakt de positie van het element absoluut gecentreerd onder
position-absolute-bottom-right	Maakt de positie van het element absoluut rechts onder
position-sticky-top	Maakt dat de positie van het element stopt als het boven aan het scherm is
position-sticky-bottom	Maakt dat de positie van het element stopt als het onder aan het scherm is

Mobiel eerst.

Classes	Omschrijving
display-none	Het element is volledig verwijderd
display-inline	Geeft een element weer als een inline-element
display-inline-block	Geeft een element weer als een inline-blokcontainer. Het element zelf is opgemaakt als een inline-element, maar u kunt hoogte- en breedtewaarden toepassen.
display-block	Geeft een element weer als een blok-element
display-table	Laat het element zich gedragen als een <table>-element
display-table-row	Laat het element zich gedragen als een <tr>-element
display-table-cell	Laat het element zich gedragen als een <td>-element
display-flex	Geeft een element weer als een flexcontainer op blokniveau
display-inline-flex	Geeft een element weer als een flexcontainer op inline-niveau

Grotere schermen (992px).

Classes	Omschrijving
.display-r-none	Het element is volledig verwijderd (gr. scherm)
display-r-inline	Geeft een element weer als een inline-element (gr. scherm)
display-r-inline-block	Geeft een element weer als een inline-blokcontainer. Het element zelf is opgemaakt als een inline-element, maar u kunt hoogte- en breedtewaarden toepassen (gr. scherm)
display-r-block	Geeft een element weer als een blok-element (gr. scherm)
display-r-table	Laat het element zich gedragen als een <table>-element (gr. scherm)
display=r-table-row	Laat het element zich gedragen als een <tr>-element (gr. scherm)
display-r-table-cell	Laat het element zich gedragen als een <td>-element (gr. scherm)
display-r-flex	Geeft een element weer als een flexcontainer op blokniveau (gr. scherm)
display-r-inline-flex	Geeft een element weer als een flexcontainer op inline-niveau (gr. scherm)

Classes	Omschrijving
overflow-hidden	De overloop wordt bijgesneden en de rest van de inhoud zal onzichtbaar zijn
overflow-auto	Als de overloop wordt afgekapt, moet er een schuifbalk worden toegevoegd om de rest van de inhoud te zien
overflow-x-hidden	De overloop horizontaal wordt bijgesneden en de rest van de inhoud zal onzichtbaar zijn
overflow-y-hidden	De overloop verticaal wordt bijgesneden en de rest van de inhoud zal onzichtbaar zijn
overflow-x-auto	Als de overloop horizontaal wordt afgekapt, moet er een schuifbalk worden toegevoegd om de rest van de inhoud te zien
overflow-y-auto	Als de overloop verticaal wordt afgekapt, moet er een schuifbalk worden toegevoegd om de rest van de inhoud te zien
image	Maakt een afbeelding responsive
image-max	Maakt een afbeelding 100% en als een blok element
image-hover	Maakt een hover voor een afbeelding opacity:0.5
image-center	Centreerd een afbeelding
fit-content	Geeft een element de breedte van de inhoud
overlay	Geeft een ddorzichtig blok element wat het gehele scherm afdekt, behalve de elementen met een hogere status (z-index)

Classes	Omschrijving
radius-5	Geeft een border-radius van 5px
radius-10	Geeft een border-radius van 10px
radius-20	Geeft een border-radius van 20px
radius-50	Geeft een border-radius van 50px (circel)
radius-curved	Geeft een border-radius van 15px 0px 15px 0px (curve)
lorem-sm	Geeft een kleine lorem tekst `<p class="lorem-sm">`
lorem-lg	Geeft een grote lorem tekst `<p class="lorem-lg">`
cursor-default	Geeft de cursor default vorm op dat element
cursor-pointer	Geeft de cursor een aanwijs handje op dat element
cursor-text	Geeft de cursor een tekst streepje op dat element
cursor-not-allowed	Geeft de cursor een niet te gebruiken vorm op dat element (disabled)