Skip to main content

Grid

The theme uses Bootstrap 4, which lets you, among other things, display elements side by side and at the same time in a single column on mobile devices.

For example, to display two text elements side by side, first add one element each of type Contao Themes (Inhaltscontainer Anfang) (content container start) and Contao Themes (Inhaltscontainer Ende) (content container end). The content container start element needs the class row.

Content container Content container

Content container with row class Content container with row class

Between the wrapper elements, place two text elements and select .col-12 and .col-md-6 under Advanced CSS classes > Column widths for each. This means the elements are displayed in one column below a width of 768px and in two columns above it. How exactly to use the classes is explained in the Bootstrap 4 documentation.

Grid elements Grid elements

Grid element classes Grid element classes

You find an example in the ODD demo on the page Textelemente.