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:

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

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

Example

Left: Default spacing | Right: Spacing class "twt-mb-5"

---

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

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

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)

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".