Designing Shopping Experiences with Bootstrap CSS classes
In this tutorial, you will learn how to design themes with Bootstrap CSS classes.
Last updated
In this tutorial, you will learn how to design themes with Bootstrap CSS classes.
Last updated
© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH
The Shopware 6 storefront is based on the Bootstrap framework. Due to our HC-Architecture® ThemeWare® of course it is also completely compatible with Bootstrap.
On this page you will find the most common Bootstrap classes which you can apply to CMS blocks in your Shopping Experiences . Without any programming knowledge!
Note: In Shopware 6.5, Shopware has replaced Bootstrap 4 with Bootstrap 5. A few classes therefore differ depending on the Shopware version used. In some tables you will therefore find a column "... v4" and one "... v5".
In Shopware 6.4, the Storefront uses .
In Shopware 6.5, the Storefront uses .
Tip: You can find some examples of use in our demo shops on the "" pages.
For aligning texts Bootstrap already provides some CSS classes you can use. Please find more about this .
CSS classes
Class v5 | Class v4 | Block/Section | Description |
---|
Examples
CSS classes
Examples
CSS classes
Examples
Note: Please note that the "ThemeWare® CMS-Styling" already represents a framework and additive CSS classes then have no effect. Additive CSS classes are relevant for Shopping Experiences without "ThemeWare® CMS-Styling".
CSS classes
CSS classes
Examples
CSS classes
Examples
CSS-Classes
Example
CSS-Classes
Examples
For colouring texts, Bootstrap already provides some classes for different colours. In the following you will find examples of the available colour variants. Please find more about this .
Class | Block/Section | Description |
---|
The Bootstrap framework also provides you with classes for adding backgrounds to Shopping Experience elements in different colours. For dark backgrounds it is recommended to choose a light text colour (see above). Please find more about this .
Class | Block/Section | Description |
---|
Bootstrap classes can also be used to define the borders of CMS blocks. For example, the class "border-0" removes borders from elements. Please find more about it .
Class v5 | Class v4 | Block/Section | Description |
---|
Class v5 | Class v4 | Block/Section | Description |
---|
Change the border colour (or border-color) of CMS blocks using the following CSS classes. Please find more about this .
Class | Block/Section | Description |
---|
Add the following CSS classes to a CMS block to easily round off its corners. Please find more about it .
Class v5 | Class v4 | Block/Section | Description |
---|
Adding or removing shadows to CMS blocks. Please find more .
Class | Block/Section | Description |
---|