# 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="https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2FiiuEhZ5pdZlA4L8dfrSk%2Fimage.png?alt=media&#x26;token=fb8c7b66-183a-4995-87cd-2ce418fa1453" 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 %}