This website uses predefined CSS-classes to give you some options to control the layout of your pages. It is based on the bootstrap CSS framework:
https://getbootstrap.com/docs/5.0/getting-started/introduction/
You are able to use most of the CSS-classes that you find in the bootstrap framework documentation of this website’s bootstrap version.
The page grid is based on 12 grid units (columns).
The CSS-class for a box using the width of 1 column would be col-1
If you want a box to be one third of the grid you give it the class col-4, indicating that it takes 4 of the 12 column units
A box that takes full width in mobile view but only half from tablet on uses two CSS-classes. Resize the browser to see the results.
Column-classes are written col-{media-breakpoint}-{column width}. There are 4 media breakpoints: xs (small phones), md (tablet), lg (desktop) and xl (large screens).
Inner spacing (padding) classes are written like this:
p{side of the box}-{breakpoint}-{space}
p: padding around
pl: padding left
pr: padding right
pt: padding top
pb: padding bottom
px: padding left and right
py: padding top and bottom
Outer spacing (margin) classes are written like this:
m{side of the box}-{breakpoint}-{space}
m: padding around
ml: padding left
mr: padding right
mt: padding top
mb: padding bottom
mx: padding left and right
my: padding top and bottom
you are able to control font sizes via these classes:
font-10
font-16
font-18
font-20
font-26
font-30
font-36
font-40
font-46
font-50
font-56
This box uses bg-{color} for background and color-{color} for font coloring
text-primary
text-secondary
text-info
text-success
text-warning
text-danger
use font-lime or font-glow for these styles – or even combine them with font size classes.