# CSS spacing classes for Shopping Experiences

In addition to the Bootstrap distance classes, ThemeWare® offers you an extended collection of distance classes based on pixel values.

Our classes are named according to the following pattern:

```css
// Spacing classes:
twt-{property}{sides}-{size} // for xs

// Extended spacing classes:
twt-{property}{sides}-{breakpoint}-{size} // for sm, md, lg und xl
```

#### Example

<figure><img src="/files/jQdJsO776zBUfgdYSGch" alt=""><figcaption><p>Left: Default spacing | Right: Spacing class "twt-mb-5"</p></figcaption></figure>

***

## Bootstrap 4 vs. Bootstrap 5

When updating from Bootstrap 4 to Bootstrap 5 (as of Shopware 6.5), some classes were renamed to use logical property names instead of direction names.

Starting with Shopware 6.5, you have the option in ThemeWare® to choose whether you want to use the old Bootstrap 4 or the new Bootstrap 5 notation:

* Tab "**More**" => Block "**Advanced settings**" => Section "**Additional CSS classes**" => Field "**Load CSS spacing classes (optional)**"
  * [Bootstrap 4](#bootstrap-4-shopware-6.4)
  * [Bootstrap 5](#bootstrap-5-shopware-6.5) (default)

If you are using the old writing and don't want to change it everywhere, just load the CSS spacing classes for Bootstrap 4. New ThemeWare® installations automatically load the Bootstrap 5 spacing classes.

Below you will find the syntax for both variants:

***

## Bootstrap 5 (Shopware 6.5)

**CSS classes**

| Structure | Description                                                                                                                                                                                                                                                                                                                                                   |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **twt**   | ThemeWare® Prefix                                                                                                                                                                                                                                                                                                                                             |
| **-**     | Separator                                                                                                                                                                                                                                                                                                                                                     |
| **m**     | <p>Eigenschaft:</p><ul><li>m => Margin (Außenabstand)</li><li>p => Padding (Innenabstand)</li></ul>                                                                                                                                                                                                                                                           |
| **t**     | <p>Seiten:</p><ul><li>t => Top (oben)</li><li><mark style="background-color:yellow;">e => End (rechts)</mark></li><li>b => Bottom (unten)</li><li><mark style="background-color:yellow;">s => Start (links)</mark></li><li>x => Left/Right (links und rechts)</li><li>y => Top/Bottom (oben und unten)</li><li>Keine Angabe => für alle vier Seiten</li></ul> |
| **-**     | Separator                                                                                                                                                                                                                                                                                                                                                     |
| **md**    | <p>Breakpoint: (optional) \[ab ThemeWare® 0.2.8]</p><ul><li>sm => ab 576px</li><li>md => ab 768px</li><li>lg => ab 992px</li><li>xl => ab 1200px</li><li>Keine Angabe => ab 0px</li></ul>                                                                                                                                                                     |
| **-**     | Separator                                                                                                                                                                                                                                                                                                                                                     |
| **n**     | <p>Negativer Wert (nur Margin): (optional)</p><ul><li>n => Wert wird negativ verwendet (-x Pixel)</li><li>Keine Angabe => wird positiv verwendet</li></ul>                                                                                                                                                                                                    |
| **2**     | <p>Größe:</p><ul><li>0 => 0 Pixel</li><li>1 => 10 Pixel</li><li>2 => 20 Pixel</li><li>3 => 30 Pixel</li><li>4 => 40 Pixel</li><li>5 => 50 Pixel</li><li>6 => 60 Pixel</li><li>7 => 70 Pixel</li><li>8 => 80 Pixel</li><li>9 => 90 Pixel</li><li>auto</li></ul>                                                                                                |

**Examples**

```
// Spacing classes:
twt-p-3       // padding: 30px
twt-px-4      // padding: 0 40px
twt-ms-1      // margin-left: 10px
twt-me-2      // margin-right: 20px
twt-mt-n3     // margin-top: -30px

// Extended spacing classes:
twt-m-md-4    // margin: 40px (from 768px)
twt-mt-md-n2  // margin-top: -20px (from 768px)
```

***

## Bootstrap 4 (Shopware 6.4)

**CSS classes**

| Structure | Description                                                                                                                                                                                                                                                        |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **twt**   | ThemeWare® Prefix                                                                                                                                                                                                                                                  |
| **-**     | Separator                                                                                                                                                                                                                                                          |
| **m**     | <p>Eigenschaft:</p><ul><li>m => Margin (Außenabstand)</li><li>p => Padding (Innenabstand)</li></ul>                                                                                                                                                                |
| **t**     | <p>Seiten:</p><ul><li>t => Top (oben)</li><li>r => Right (rechts)</li><li>b => Bottom (unten)</li><li>l => Left (links)</li><li>x => Left/Right (links und rechts)</li><li>y => Top/Bottom (oben und unten)</li><li>Keine Angabe => für alle vier Seiten</li></ul> |
| **-**     | Separator                                                                                                                                                                                                                                                          |
| **md**    | <p>Breakpoint: (optional) \[ab ThemeWare® 0.2.8]</p><ul><li>sm => ab 576px</li><li>md => ab 768px</li><li>lg => ab 992px</li><li>xl => ab 1200px</li><li>Keine Angabe => ab 0px</li></ul>                                                                          |
| **-**     | Separator                                                                                                                                                                                                                                                          |
| **n**     | <p>Negativer Wert (nur Margin): (optional)</p><ul><li>n => Wert wird negativ verwendet (-x Pixel)</li><li>Keine Angabe => wird positiv verwendet</li></ul>                                                                                                         |
| **2**     | <p>Größe:</p><ul><li>0 => 0 Pixel</li><li>1 => 10 Pixel</li><li>2 => 20 Pixel</li><li>3 => 30 Pixel</li><li>4 => 40 Pixel</li><li>5 => 50 Pixel</li><li>6 => 60 Pixel</li><li>7 => 70 Pixel</li><li>8 => 80 Pixel</li><li>9 => 90 Pixel</li><li>auto</li></ul>     |

**Examples**

```
// Spacing classes:
twt-p-3       // padding: 30px
twt-px-4      // padding: 0 40px
twt-ml-1      // margin-left: 10px
twt-mr-2      // margin-right: 20px
twt-mt-n3     // margin-top: -30px

// Extended spacing classes:
twt-m-md-4    // margin: 40px (from 768px)
twt-mt-md-n2  // margin-top: -20px (from 768px)
```

{% hint style="info" %}
**Note**: You can activate or deactivate the ThemeWare® "CSS spacing classes" as required. You can find the configuration in the Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes".
{% endhint %}


---

# 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://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/css-spacing-classes-for-shopping-experiences.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.