# Erlebniswelten mit Bootstrap CSS-Klassen optimieren

{% hint style="warning" %}
**Achtung**: Shopware ab Version 6.5 nutzt Bootstrap 5. Dieser Artikel ist dann veraltet und wird bald überarbeitet.
{% endhint %}

Die Shopware 6 Storefront basiert auf dem Bootstrap-Framework. Aufgrund unserer HC-Architecture® ist ThemeWare® ebenfalls vollständig kompatibel mit Bootstrap.

{% 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 %}

***

## Bootstrap CSS-Klassen

In diesem Tutorial findest du eine Übersicht über der wichtigsten Bootstrap CSS-Klassen, welche du in deinen Erlebniswelten nutzen kannst.

{% embed url="<https://getbootstrap.com/docs/5.2/getting-started/introduction/>" %}
Bootstrap 5 Dokumentation
{% endembed %}

Die folgenden CSS-Klassen kannst du ganz einfach über die Sektion- oder Block-Einstellungen hinzufügen.

![](/files/h7xMGMyz2q37MuKHSC9y)

Du kannst natürlich auch den Shopware 6 HTML-Editor (z.B. in einem CMS-Element) nutzen, um eigenen HTML-Code zu integrieren. Bitte beachte hierbei, das der Editor deinen Code – aus Sicherheitsgründen – automatisch bereinigt und nicht all HTML-Tags und CSS-Klassen funktionieren.

{% hint style="info" %}
**Hinweis**: Ergänzend empfehlen wir dir unsere [Bootstrap-Beispiele](https://demo.themeware.design/modern/Service/Bootstrap-Beispiele/) in unseren Demoshops.
{% endhint %}

***

### Text <a href="#text" id="text"></a>

Zum Ausrichten von Texten liefert dir Bootstrap CSS-Klassen, welche du nutzen kannst.

![](/files/DA6HuaK01VuwwETevbZL)

```html
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
```

***

### Textfarbe <a href="#color" id="color"></a>

Zum Einfärben von Texten liefert Bootstrap bereits einige Klassen für verschiedene Farben mit. Nachfolgend findest du Beispiele für die verfügbaren Farb-Varianten.

![](/files/KLFgTRlRZml4FLU8C4WM)

```html
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
```

***

### Hintergrund-Farbe <a href="#background-color" id="background-color"></a>

Das Bootstrap-Framework liefert dir auch Klassen zum Einfärben von Hintergründen von Erlebniswelt-Elementen in verschiedenen Farben mit. Für dunkle Hintergründe empfiehlt es sich eine helle Textfarbe zu wählen (siehe oben).\
![](/files/4hVjPjB0kpAWVtgAvXmJ)

```html
<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-secondary text-white">.bg-secondary</div>
<div class="bg-success text-white">.bg-success</div>
<div class="bg-danger text-white">.bg-danger</div>
<div class="bg-warning text-dark">.bg-warning</div>
<div class="bg-info text-white">.bg-info</div>
<div class="bg-light text-dark">.bg-light</div>
<div class="bg-dark text-white">.bg-dark</div>
<div class="bg-white text-dark">.bg-white</div>
```

***

### Rahmen <a href="#border" id="border"></a>

Über Bootstrap-Klassen können auch die Rahmen von Erlebniswelt-Elementen definiert werden. Die Klasse *"border-0"* entfernt beispielsweise Rahmen von Elementen.

![](/files/AUmjnyaHLxP0llTGVwWO)

```html
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
<span class="border-0"></span>
```

***

### Abstände <a href="#spacings" id="spacings"></a>

Mit folgenden Bootstrap-Klassen können Abstände für Erlebniswelt-Elemente definiert werden. Es gibt Abstandsklassen auch für verschiedene Viewports.

Die Klassen werden nach dem Format `{Eigenschaft}{Seiten}-{Größe}` für xs und `{Eigenschaft}{Seiten}-{Breakpoint}-{Größe}` für sm, md, lg und xl benannt.

#### Eigenschaft:

* m - margin (Außenabstand)
* p - padding (Innenabstand)

#### Seiten:

* t - top
* b - bottom
* l - left
* r - right
* x - sowohl \*-left als auch \*-right
* y - sowohl \*-top als auch \*-bottom
* ohne - alle 4 Seiten

#### Breakpoint:

* sm - ab 576px
* md - ab 768px
* lg - ab 992px
* xl - ab 1200px
* ohne - ab 0px

#### Größe: ($spacer = 1rem)

* 0 - Abstand auf 0 setzen
* 1 - Abstand auf $spacer \* .25 setzen
* 2 - Abstand auf $spacer \* .5 setzen
* 3 - Abstand $spacer setzen
* 4 - Abstand $spacer \* 1,5 setzen
* 5 - Abstand $spacer \* 3 setzen
* auto - Abstand 'auto' setzen

{% hint style="info" %}
**Hinweis**: ThemeWare® bietet dir darüber hinaus eine umfangreiche Sammlung an Abstandsklassen auf Pixel-Basis.

Mehr dazu findest du im Artikel: [ThemeWare® CSS-Klassen für Erlebniswelten](/wissensdatenbank/anleitungen/erlebniswelten/themeware-css-klassen-fuer-erlebniswelten.md)
{% endhint %}

***

## Weiterführende Informationen

{% content-ref url="/pages/BwhWJS6Am8hB5t7aDmCO" %}
[Erlebniswelten mit Bootstrap CSS-Klassen gestalten](/wissensdatenbank/anleitungen/erlebniswelten/erlebniswelten-mit-bootstrap-css-klassen-gestalten.md)
{% endcontent-ref %}

{% content-ref url="/pages/5G1QEmIz1dxY66e6hc8Y" %}
[Erlebniswelten mit Bootstrap HTML-Elementen optimieren](/wissensdatenbank/profiwissen/erlebniswelten-mit-bootstrap-html-elementen-optimieren.md)
{% endcontent-ref %}

{% content-ref url="/pages/egLmJYdf8AjKRmjcyB2J" %}
[Responsive Erlebniswelten mit Bootstrap](/wissensdatenbank/anleitungen/erlebniswelten/responsive-erlebniswelten-mit-bootstrap.md)
{% endcontent-ref %}


---

# 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/erlebniswelten-mit-bootstrap-css-klassen-optimieren.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.