# Spalten-CSS-Klassen in ThemeWare® CMS-Elementen

In diesem Artikel erfährst du, wie du die Konfiguration "CSS-Klasse (Spalte)" in CMS-Elementen von ThemeWare® nutzen kannst.

{% hint style="info" %}
**Hinweis**: Dieser Artikel richtet sich an Profis und Experten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne: [ThemeWare® Services im Überblick](https://service.themeware.design/service)
{% endhint %}

***

## Spalten-CSS-Klassen

Bestimmte CMS-Blöcke von ThemeWare® (z.B. "Sechs Spalten (Individuell)") können die Experten-Konfiguration "**CSS-Klasse (Spalte)**" bestimmter CMS-Element (z.B. "Runder Teaser") übernehmen.

Dadurch kannst du die Spaltenanzahl in verschiedenen Viewports festlegen, vorausgesetzt du kennst dich ausreichend mit dem Grid-System von Bootstrap aus.

{% embed url="<https://getbootstrap.com/docs/5.0/layout/grid/>" %}
Grid system
{% endembed %}

{% hint style="warning" %}
**Wichtig**: Bitte beachte, dass sich diese Funktion derzeit in einer Testphase befindet und ggf. noch einmal geändert werden kann.
{% endhint %}

## Beispiel

Standardmäßig haben die "individuellen" CMS-Blöcke ihr vorgesehenes Spaltenlayout. Hier zum Beispiel der 6-Spalter:

<figure><img src="/files/OdJjSLzYEOPOCRfGwtNT" alt=""><figcaption><p>ThemeWare® "Sechs Spalten (Individuell)"</p></figcaption></figure>

Mit der Experten-Konfiguration "CSS-Klasse (Spalte)" im Tab "Erweitert" des CMS-Elementes (hier "Runder Teaser"), kannst du mit Bootstrap-Klassen (z.B. `col-3`) eine Spaltenbreite für das entsprechende Element definieren.

<figure><img src="/files/BEFmswvDdiDutWaYW8uy" alt=""><figcaption></figcaption></figure>

```
// Beispiele
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
```

Nun sieht der Block wie folgt aus:

<div align="left"><figure><img src="/files/0QHcd3ZhdTYgrBVDmjAG" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="info" %}
**Tipp**: Der Abstand zwischen den beiden Zeile kann, wie gehabt, über die gängigen Abstandsklassen (hier `twt-cms-col-margin-20`) ergänzt werden.
{% endhint %}

Wie du sicherlich bemerkt hast, sind alle Spalten üblicherweise links ausgerichtet. Auch dies kannst du beeinflussen.

## Ergänzende CSS-Klassen für den Spalten-CMS-Block

Zusätzlich zu den CSS-Klassen, welche du in den CMS-Elementen einsetzen kannst, kannst du auch CSS-Klassen an den CMS-Blöcken nutzen um beispielsweise die horizontale Ausrichtung der Spalten im CMS-Block definieren.

### Horizontale Ausrichtung

Nutze dafür einfach die entsprechenden [Bootstrap CSS-Klassen](https://getbootstrap.com/docs/5.0/layout/columns/#horizontal-alignment) (siehe `justify-content-...`) im entsprechenden CMS-Block. Da die Block-Klassen nicht an der – in diesem Fall – benötigten Stelle platziert werden, verwende bitte den Prefix `twt-` (also `twt-justify-content-...`) . Diese Klassen werden dann automatisch von den "individuellen" CMS-Blöcken erkannt und an die `row` weitervererbt.

```
// Beispiele
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:

<div align="left"><figure><img src="/files/aZDCqriTLw8jGv98k79N" alt="" width="563"><figcaption></figcaption></figure></div>

### Flexible Spalten

Möchtest du keine Spaltenbreiten definieren, kannst du die Klasse `twt-flex-columns` im CMS-Block verwenden. Hierbei richten sich die Spalten nach der Größe der entsprechenden CMS-Elemente (diese wird i.d.R. durch die verwendeten Bilder vorgegeben).

In unserem Beispiel sind die Thumbnails der Bilder `227px` groß. Dies führt zu folgendem Ergebnis:

<div align="left"><figure><img src="/files/eevdDKhUgApMQgJJGbHP" alt="" width="563"><figcaption></figcaption></figure></div>

Über die Konfiguration "Maximale Breite" im Bereich "Allgemein" vom Tab "Layout", kannst du die maximale Breite eines Teasers definieren. Stellst du hier z.B. `140px` ein werden die Teaser in unserem Beispiel wie folgt dargestellt:

<figure><img src="/files/WuiS1WTkUvBMLc4EH1W5" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wiki.themeware.design/wissensdatenbank/profiwissen/spalten-css-klassen-in-themeware-cms-elementen.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.