Styleguide

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.

Grid

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

col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
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

col-4
col-4
col-4

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.

col-12 col-md-6
col-12 col-md-6

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).

Padding and Margin

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

p-10
padding around 10px
pl-10
padding left 10px
pt-10 pb-10
padding top and padding 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

m-10
margin around 10px
ml-10
margin left 10px
mt-10 mb-10
margin top and margin bottom

Font Sizes

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

Colors

This box uses bg-{color} for background and color-{color} for font coloring

bg-white color-black