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

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

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

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)