Hinweis: Die linke und rechte Seiten sind jeweils der Code in HTML und das Layout im Browser.
1. Code für Default Panels
<div class='panel panel-default'>
<div class='panel-heading'>
Dunkelblaues Herren T-Shirt von Domyos
</div>
<div class='panel-body'>
<img style='width:240px; height:320px;' src='images/domyosxbx.jpg'>
</div>
<div class='panel-footer'>
Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan
</div>
</div>
1. Ausgabe für Default Panels
2. Code für Primary Panels
<div class='panel panel-primary'>
<div class='panel-heading'>
Olives und Weißes Damen T-Shirt von Gerry Weber
</div>
<div class='panel-body'>
<img style='width:240px; height:320px;' src='images/gerryweberxxa.jpg'>
</div>
<div class='panel-footer'>
Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan
</div>
</div>
2. Ausgabe für Primary Panels
3. Code für Danger Panels
<div class='panel panel-danger'>
<div class='panel-heading'>
Purples Damen T-Shirt von H&M
</div>
<div class='panel-body'>
<img style='width:240px; height:320px;' src='images/hundmxbx3.jpg'>
</div>
<div class='panel-footer'>
Damen T-Shirt mit V-Ausschnitt,Purple, 50% Bio-Baumwolle, 47% Baumwolle und 3% Elasthan
</div>
</div>
3. Ausgabe für Danger Panels
4. Code für Info Panels
<div class='panel panel-info'>
<div class='panel-heading'>
Hellokeres Damen T-Shirt von H & M
</div>
<div class='panel-body'>
<img style='width:240px; height:320px;' src='images/hundmxxa.jpg'>
</div>
<div class='panel-footer'>
Damen T-Shirt mit breitem Rundausschnitt, Helloker, 100% Viskose
</div>
</div>
4. Ausgabe für Info Panels
5. Code für Success Panels
<div class='panel panel-success'>
<div class='panel-heading'>
Weißes Herren Poloshirt von Mikava
</div>
<div class='panel-body'>
<img style='width:240px; height:320px;' src='images/mikavaxxa.jpg'>
</div>
<div class='panel-footer'>
Damen T-Shirt mit breitem Rundausschnitt, Helloker, 100% Viskose
</div>
</div>
5. Ausgabe für Success Panels