> 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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://knowledge.themeware.design/knowledge-base/profi-knowledge/optimizing-shopping-experiences-with-bootstrap-css-classes.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.