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 Bootstrap 4.
In Shopware 6.5, the Storefront uses Bootstrap 5.
Tip: You can find some examples of use in our demo shops on the "Bootstrap examples" pages.
For aligning texts Bootstrap already provides some CSS classes you can use. Please find more about this here.
CSS classes
Class v5 | Class v4 | Block/Section | Description |
---|---|---|---|
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 here.
CSS classes
Examples
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 here.
CSS classes
Examples
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 here.
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
Change the border colour (or border-color) of CMS blocks using the following CSS classes. Please find more about this here.
CSS classes
Examples
Add the following CSS classes to a CMS block to easily round off its corners. Please find more about it here.
CSS-Classes
Example
Adding or removing shadows to CMS blocks. Please find more here.
CSS-Classes
Examples
Class | Block/Section | Description |
---|---|---|
Class | Block/Section | Description |
---|---|---|
Class v5 | Class v4 | Block/Section | Description |
---|---|---|---|
Class v5 | Class v4 | Block/Section | Description |
---|---|---|---|
Class | Block/Section | Description |
---|---|---|
Class v5 | Class v4 | Block/Section | Description |
---|---|---|---|
Class | Block/Section | Description |
---|---|---|
text-start
text-left
Block
Align text to the left.
text-center
text-center
Block
Align text centered.
text-end
text-right
Block
Align text to the right.
text-primary
Block
Output text in primary colour.
text-secondary
Block
Output text in secondary colour.
text-success
Block
Output text in the colour "Success".
text-danger
Block
Output text in the colour "Error".
text-warning
Block
Output text in the colour "Notice".
text-info
Block
Output text in the colour "Information".
text-white
Block
Output text in the colour "white".
bg-primary
Block
Display background with primary colour.
bg-secondary
Block
Display background with secondary colour.
bg-success
Block
Display background with the colour "Success".
bg-danger
Block
Display background with the colour "Error".
bg-warning
Block
Display background with the colour "Notice".
bg-info
Block
Display background with the colour "Information".
border
border
Block
Add border.
border-top
border-top
Block
Add border on top.
border-end
border-right
Block
Add border on the right.
border-bottom
border-bottom
Block
Add border at bottom.
border-start
border-left
Block
Add border on the left.
border-0
border-0
Block
Remove border.
border-top-0
border-top-0
Block
Remove border at top.
border-end-0
border-right-0
Block
Remove border on the right.
border-bottom-0
border-bottom-0
Block
Remove border at bottom.
border-star-0
border-left-0
Block
Remove border on the left.
border-primary
Block
Display border with the primary colour.
border-secondary
Block
Display border with the secondary colour.
border-success
Block
Display border with the colour "Success".
border-danger
Block
Display border with the colour "Error".
border-warning
Block
Display border with the colour "Notice".
border-info
Block
Display border with the colour "Information".
border-light
Block
Display border with the colour "light".
border-dark
Block
Display border with the colour "dark".
border-white
Block
Display border with the colour "white".
rounded
rounded
Block
Round off element.
rounded-top
rounded-top
Block
Round off element at top
rounded-end
rounded-right
Block
Round off element on right.
rounded-bottom
rounded-bottom
Block
Round off element at bottom.
rounded-start
rounded-left
Block
Round off element on left.
rounded-0
rounded-0
Block
Do not round off element.
shadow-sm
Block
Small drop shadow.
shadow
Block
Normal drop shadow.
shadow-lg
Block
Large drop shadow.