Column CSS classes in ThemeWare® CMS elements
In this article, you will learn how to use the "CSS class (column)" configuration in CMS elements from ThemeWare®.
Note: This article is intended for professionals and experts. If you are not absolutely sure, we will be happy to support you: ThemeWare® Services at a glance
Column CSS classes
Certain CMS blocks of ThemeWare® (e.g. "Six columns (Custom)") can adopt the expert configuration "CSS class (column)" of certain CMS elements (e.g. "Round teaser").
This allows you to define the number of columns in different viewports, provided you are sufficiently familiar with Bootstrap's grid system.
Important: Please note that this feature is currently in a testing phase and may be changed if necessary.
Example
By default, the "custom" CMS blocks have their intended column layout. Here, for example, a six column block:
With the expert setting "CSS class (column)" in the "Advanced" tab of the CMS element (here "Round teaser"), you can use Bootstrap classes (e.g. col-3) to define a column width for the corresponding element.
The block now looks as follows:
Tip: The spacing between the two rows can be added using the existing spacing classes (here twt-cms-col-margin-20).
As you will have noticed, all columns are usually aligned to the left. You can also influence this.
Additional CSS classes for the column CMS block
In addition to the CSS classes that you can use in the CMS elements, you can also use CSS classes on the CMS blocks, for example, to define the horizontal alignment of the columns in the CMS block.
Horizontal alignment
To do this, just use the corresponding Bootstrap CSS classes Bootstrap CSS classes (justify-content-...) in the corresponding CMS block. As the block classes are not placed in the right place please use the prefix twt- (i.e. twt-justify-content-...) . These classes are then automatically recognised by the "individual" CMS blocks and passed to the row.
Verwendest du die CSS-Klasse twt-justify-content-center im CMS-Block sieht unser Beispiel nun wie folgt aus:
Flexible columns
If you do not want to define column widths and only want to work with the maximum width of the corresponding CMS elements, for example, you can use the css class twt-flex-columns in the CMS block.
In our example, the thumbnails of the images are 227px in size. This leads to the following result:
Using the "Maximum width" configuration in the "General" section of the "Layout" tab, you can define the maximum width of a teaser. If you set 140px here, for example, the teasers in our example will be represented as follows:
Last updated
