> For the complete documentation index, see [llms.txt](https://knowledge.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://knowledge.themeware.design/knowledge-base/profi-knowledge/optimizing-shopping-experiences-with-bootstrap-css-classes.md).

# Optimizing Shopping Experiences with Bootstrap CSS classes

{% hint style="warning" %}
**Attention**: Shopware from version 6.5 uses Bootstrap 5, this article is then outdated and will be revised soon.
{% endhint %}

The Shopware 6 Storefront is based on the Bootstrap framework. Due to our HC Architecture®, ThemeWare® is also completely compatible with Bootstrap.

{% hint style="info" %}
**Note**: This article is intended for professionals and experts. If you are not absolutely sure, we will be happy to support you: [ThemeWare® Services at a glance](https://service.themeware.design/en/service)
{% endhint %}

***

## Bootstrap CSS classes

In this tutorial you will find an overview of the most important Bootstrap CSS classes, you can use in your Shopping Experiences.

{% embed url="<https://getbootstrap.com/docs/5.2/getting-started/introduction/>" %}

You can easily add the following CSS Classes via the section or block settings.

![](/files/d0ZcCfE8o51ssGNWmjMA)

Of course, you can also use the Shopware 6 HTML editor (e.g. in a CMS element) to integrate your own HTML code. Please note that the editor will automatically clean up your code – for security reasons – and not all HTML tags and CSS classes will work.

{% hint style="info" %}
**Note**: dditionally we recommend our [Bootstrap examples](https://demo.themeware.design/modern/Service/Bootstrap-Beispiele/) in our demo shops.
{% endhint %}

***

### Text <a href="#text" id="text"></a>

For aligning texts Bootstrap provides CSS Classes you can use.

![](/files/YkRoGCbfdnO8HB5W0EAz)

```html
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
```

***

### Text color <a href="#color" id="color"></a>

For coloring texts, Bootstrap already provides some classes for different colors. The following you will find examples of the available color variants.

![](/files/J2tepVRL94jYCHewf9Ur)

```html
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
```

***

### Background Colour <a href="#background-color" id="background-color"></a>

The Bootstrap framework also provides you with classes for coloring backgrounds of Shopping Experience elements in different colors. For dark backgrounds it is recommended to choose a light text color (see above).\
![](/files/UUrDrTJc2KYIFQGdiM8e)

```html
<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-secondary text-white">.bg-secondary</div>
<div class="bg-success text-white">.bg-success</div>
<div class="bg-danger text-white">.bg-danger</div>
<div class="bg-warning text-dark">.bg-warning</div>
<div class="bg-info text-white">.bg-info</div>
<div class="bg-light text-dark">.bg-light</div>
<div class="bg-dark text-white">.bg-dark</div>
<div class="bg-white text-dark">.bg-white</div>
```

***

### Border <a href="#border" id="border"></a>

Bootstrap Classes can also be used to define the borders of Shopping Experience elements. The class *"border-0"* removes borders from elements, for example.

![](/files/7kajxpEuX6xWg3QkQ7nt)

```html
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
<span class="border-0"></span>
```

***

### Spacings <a href="#spacings" id="spacings"></a>

With the following Bootstrap Classes, spacings can be defined for Shopping Experience elements. There are also spacing classes for different viewports.

The classes are named according to the format `{property}{page}-{size}` for xs and `{property}{page}-{breakpoint}-{size}` for sm, md, lg and xl.

#### Property:

* m - margin (outer spacing)
* p - padding (Inner spacing)

#### Sides:

* t - top
* b - bottom
* l - left
* r - right
* x - both \*-left and\*-right
* y - both \*-top and\*-bottom
* without - all 4 sides

#### Breakpoint:

* sm - ab 576px
* md - ab 768px
* lg - ab 992px
* xl - ab 1200px
* ohne - ab 0px

#### Size: ($spacer = 1rem)

* 0 - Setting spacing to 0
* 1 - setting spacing to $spacer \* .25
* 2 - setting spacing to $spacer \* .5
* 3 - setting spacing to $spacer
* 4 - setting spacing to $spacer \* 1,5
* 5 - setting spacing to $spacer \* 3
* auto - setting spacing to 'auto'

{% hint style="info" %}
**Note**: ThemeWare® also offers an extensive collection of pixel-based spacing classes.

Please find more information in the article:[ThemeWare® CSS classes for Shopping Experiences](/knowledge-base/tutorials/shopping-experiences/themeware-css-classes-for-shopping-experiences.md)
{% endhint %}

***

## Additional links

{% content-ref url="/pages/1LAcAhHzUqf8soO4EywK" %}
[Designing Shopping Experiences with Bootstrap CSS classes](/knowledge-base/tutorials/shopping-experiences/designing-shopping-experiences-with-bootstrap-css-classes.md)
{% endcontent-ref %}

{% content-ref url="/pages/Y3k0Rv8tKb7rgsIwPrbb" %}
[Optimizing Shopping Experiences with Bootstrap HTML elements](/knowledge-base/profi-knowledge/optimizing-shopping-experiences-with-bootstrap-html-elements.md)
{% endcontent-ref %}

{% content-ref url="/pages/DTSzvL8zx8ryByfwH1ig" %}
[Responsive Shopping Experiences with Bootstrap](/knowledge-base/tutorials/shopping-experiences/responsive-shopping-experiences-with-bootstrap.md)
{% endcontent-ref %}