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