# Optimizing Shopping Experiences with Bootstrap HTML elements

{% 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 HTML elements

In this tutorial you will discover the most common Bootstrap HTML elements you can use in your Shopping Experiences. These elements can be placed in your Shopping Experience via the HTML editor of text elements.

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

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

***

### Buttons <a href="#buttons" id="buttons"></a>

Bootstrap offers you several predefined button styles you can use in your Shopping Experiences, each of which serves its own semantic purpose. In the following you will find all available button styles with code examples.

![](/files/TGIRxO5z6rxgxD5S4oxM)

```html
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
```

***

### Tables <a href="#tabellen" id="tabellen"></a>

The Bootstrap Framework includes several predefined table styles. There are, for example, light and dark layouts. In the following please find an example of a light variant.

![](/files/Zj8rm2of4XEDljVhWrwQ)

```html
<table class="table">
 <thead>
  <tr>
   <th scope="col">#</th>
   <th scope="col">First</th>
   <th scope="col">Last</th>
   <th scope="col">Handle</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">1</th>
   <td>Mark</td>
   <td>Otto</td>
   <td>@mdo</td>
  </tr>
  <tr>
   <th scope="row">2</th>
   <td>Jacob</td>
   <td>Thornton</td>
   <td>@fat</td>
  </tr>
  <tr>
   <th scope="row">3</th>
   <td>Larry</td>
   <td>the Bird</td>
   <td>@twitter</td>
  </tr>
 </tbody>
</table>
```

***

### Modals <a href="#modals" id="modals"></a>

Modals are also already included in Bootstrap and thus also in Shopware and ThemeWare®. In the following please find an example of a standard modal.

![](/files/ugQFimNWzPysEvzaEm8o)

```html
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
 Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog" role="document">
  <div class="modal-content">
   <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
     <span aria-hidden="true">&times;</span>
    </button>
   </div>
   <div class="modal-body">
    ...
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
   </div>
  </div>
 </div>
</div>
```

***

### Accordions <a href="#accordions" id="accordions"></a>

An accordion is an element you can use for your Shopping Experience. The Accordion is used to display extensive content in a space-saving way. This also is possible with the Bootstrap Framework.

![](/files/7kOFH3irbWn9aw2FQzdk)

```html
<div id="accordion">
 <div class="card">
  <div class="card-header" id="headingOne">
   <h5 class="mb-0">
    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
     Collapsible Group Item #1
    </button>
   </h5>
  </div>

  <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
   <div class="card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
   </div>
  </div>
 </div>
 <div class="card">
  <div class="card-header" id="headingTwo">
   <h5 class="mb-0">
    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
     Collapsible Group Item #2
    </button>
   </h5>
  </div>
  <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
   <div class="card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
   </div>
  </div>
 </div>
 <div class="card">
  <div class="card-header" id="headingThree">
   <h5 class="mb-0">
    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
     Collapsible Group Item #3
    </button>
   </h5>
  </div>
  <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
   <div class="card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
   </div>
  </div>
 </div>
</div>
```

***

## 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/2pOvqEGUDSWLXuJTBXpO" %}
[Optimizing Shopping Experiences with Bootstrap CSS classes](/knowledge-base/profi-knowledge/optimizing-shopping-experiences-with-bootstrap-css-classes.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: 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:

```
GET https://knowledge.themeware.design/knowledge-base/profi-knowledge/optimizing-shopping-experiences-with-bootstrap-html-elements.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.