Optimizing Shopping Experiences with Bootstrap HTML elements

Attention: Shopware from version 6.5 uses Bootstrap 5, this article is then outdated and will be revised soon.

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

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

---

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.

Get started with Bootstrapgetbootstrap

Note: Additionally we recommend our Bootstrap examples in our demo shops.

---

Buttons

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.

<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

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.

<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

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.

<!-- 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

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.

<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

Designing Shopping Experiences with Bootstrap CSS classes

Optimizing Shopping Experiences with Bootstrap CSS classes

Responsive Shopping Experiences with Bootstrap