> For the complete documentation index, see [llms.txt](https://wiki.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.themeware.design/wissensdatenbank/profiwissen/spalten-css-klassen-in-themeware-cms-elementen.md).

# 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>