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.

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.

// Examples
col-6 col-md-2
col-6 col-md-3 col-xl-2
col-6 col-md-4 col-lg-3 col-xl-2
col-6 col-md-4 col-lg-3 col-xl-2 d-none d-xl-block

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.

// Examples
twt-justify-content-center
twt-justify-content-xl-around

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

Logo

© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH