# Designing Shopping Experiences with Bootstrap CSS classes 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! {% hint style="info" %} **Note**: Shopware has removed `!important` instructions from Bootstrap utility classes with version 6.6.0 (see [NEXT-29246](https://github.com/shopware/shopware/blob/9f13da017c0ee9ba2a4d85b3c8ad1d58313b451c/changelog/release-6-6-0-0/2023-12-13-do-not-apply-important-to-bootstrap-utility-classes.md)). As a result, these classes no longer overwrite any predefined formatting as before. {% endhint %} #### Shopware 6.4 * In Shopware 6.4, the Storefront uses [Bootstrap 4](https://getbootstrap.com/docs/4.0/getting-started/introduction/). #### Shopware 6.5 * In Shopware 6.5, the Storefront uses [Bootstrap 5](https://getbootstrap.com/docs/5.2/getting-started/introduction/). {% hint style="success" %} **Tip**: You can find some examples of use in our demo shops on the "[Bootstrap examples](https://demo.themeware.design/modern/en/Services/Bootstrap-examples/)" pages. {% endhint %} *** ## Text alignment For aligning texts Bootstrap already provides some CSS classes you can use. Please find more about this [here](https://getbootstrap.com/docs/4.4/utilities/text/#text-alignment). **CSS classes** | Class v5 | Class v4 | 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. | **Examples** ![](https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2Fgit-blob-97f7e7c0d2aa3091c646d15c2b27d9a2ade22e58%2Fbootstrap--text-align.png?alt=media) *** ## Text colour (colour) 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](https://getbootstrap.com/docs/4.4/utilities/colors/#color). **CSS classes** | Class | Block/Section | Description | | ------------------ | ------------- | ---------------------------------------- | | **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". | **Examples** ![](https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2Fgit-blob-89a83de552210dfdd2884de240055167c87458d4%2Fbootstrap--color%20\(1\).png?alt=media) *** ## Background colour (background-color) 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](https://getbootstrap.com/docs/4.4/utilities/colors/#background-color). **CSS classes** | Class | Block/Section | Description | | ---------------- | ------------- | ------------------------------------------------- | | **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". | **Examples** ![](https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2Fgit-blob-011230035b66bd27629c65d3a45fef6931480126%2Fbootstrap--bg-color%20\(1\).png?alt=media) *** ## Border (additive) 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](https://getbootstrap.com/docs/4.4/utilities/borders/#additive). {% hint style="info" %} **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". {% endhint %} **CSS classes** | Class v5 | Class v4 | Block/Section | Description | | ----------------- | ------------- | ------------- | ------------------------ | | **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 (subtractive) **CSS classes** | Class v5 | Class v4 | Block/Section | Description | | ------------------- | --------------- | ------------- | --------------------------- | | **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. | **Examples** ![](https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2Fgit-blob-8949366616961ebc7362a96151cfdd80e0c3e1cb%2Fbootstrap--border%20\(1\).png?alt=media) *** ## Border colour (border-color) Change the border colour (or border-color) of CMS blocks using the following CSS classes. Please find more about this [here](https://getbootstrap.com/docs/4.4/utilities/borders/#border-color). **CSS classes** | Class | Block/Section | Description | | -------------------- | ------------- | --------------------------------------------- | | **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". | **Examples** ![](https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2Fgit-blob-f04d2fc68fb03bd2155b730727d5cc2349ab8491%2Fbootstrap--border-color.png?alt=media) *** ## Border-radius Add the following CSS classes to a CMS block to easily round off its corners. Please find more about it [here](https://getbootstrap.com/docs/4.4/utilities/borders/#border-radius). **CSS-Classes** | Class v5 | Class v4 | Block/Section | Description | | ------------------ | -------------- | ------------- | ---------------------------- | | **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. | **Example** ![](https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2Fgit-blob-e8f2dcc5029d0ceb3fb51190939708bc592e5647%2Fbootstrap--border-radius.png?alt=media) *** ## Shadow Adding or removing shadows to CMS blocks. Please find more [here](https://getbootstrap.com/docs/4.4/utilities/shadows/). **CSS-Classes** | Class | Block/Section | Description | | ------------- | ------------- | ------------------- | | **shadow-sm** | Block | Small drop shadow. | | **shadow** | Block | Normal drop shadow. | | **shadow-lg** | Block | Large drop shadow. | **Examples** ![](https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2Fgit-blob-42ad95ce82ce3faaae0ad95c5433ae6d3bee88e4%2Fbootstrap--box-shadow.png?alt=media) *** ## Special case: CMS blocks with ThemeWare® CMS styling Shopware has removed `!important` instructions from Bootstrap utility classes with version 6.6.0 (see [NEXT-29246](https://github.com/shopware/shopware/blob/9f13da017c0ee9ba2a4d85b3c8ad1d58313b451c/changelog/release-6-6-0-0/2023-12-13-do-not-apply-important-to-bootstrap-utility-classes.md)). As a result, some CSS classes available in Bootstrap are now overwritten by the CMS styling due to the corresponding CSS hierarchy. If you would like to apply **Bootstrap CSS classes** to **CMS blocks**, please note that the ThemeWare® CMS styling overrides the border (border, border-radius), the background colour (background-color) and the margin at the bottom (margin-bottom). Therefore, remove the CMS styling for the corresponding CMS block with the CSS class `twt-cms-block-reset` so that the bootstrap classes take effect. *** ## Related links {% embed url="" %} Bootstrap 5 documentation {% endembed %} {% embed url="" %} Bootstrap 4 documentation {% endembed %}