Menu

Naar inhoud

Websites

Login NL - EN

5. Responsive grid

Ghent University uses the Bootstrap grid system; see below for more information:

http://getbootstrap.com/css/#grid

5.1 Responsive grid

Below is an example of the column structure on mobile, tablet (portrait and landscape) and desktop.

Grid op mobiel
4 kolommen
Grid op tablet portrait
6 kolommen
Grid op tablet landscape
12 kolommen
Grid op desktop apparaat
12 kolommen

5.2 Responsive behaviour content blocks

Below is the responsive behaviour of the content blocks on mobile, tablet (portrait and landscape) and desktop.

See example 7.1 Basic layout

Blokken op mobiel
4 kolommen
Blokken op tablet portrait
6 kolommen
Blokken op tablet landscape
12 kolommen
Blokken op desktop apparaat
12 kolommen

5.3 Alternative responsive behaviour content blocks

For the 12 column grid the content blocks are also outlined in the ratio 1/3 – 2/3 (light blue areas) or at ¼ of the width of the page (green blocks).

See examples 7.2 Selection page, 7.3 Detail page7.4 Detail page with page navigation

Blokken op tablet landscape
12 kolommen
Blokken op desktop apparaat
12 kolommen

To top