Card deck – Card deck with a header and a footer

Component
Name	Card deck
Description	Card deck with a header and a footer
Provider	Skin
Reference	getbootstrap.com - card decks
Styling	For all possible color styles and corresponding examples, see colors.

• 3 cards in a row
• 2 cards in a row

Card deck with a header and a footer

3 cards in a row

Result

Lorem ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum...

Lorem ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum...

Lorem ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum...

Code

<div class="card-deck">
  <div class="card">
    <div class="card-header">
<big>'''Lorem ipsum'''</big>
    </div>
    <div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
    </div>
    <div class="card-footer">
<small class="text-muted">[[Lorem ipsum|Lorem ipsum...]]</small>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
<big>'''Lorem ipsum'''</big>
    </div>
    <div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
    </div>
    <div class="card-footer">
<small class="text-muted">[[Lorem ipsum|Lorem ipsum...]]</small>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
<big>'''Lorem ipsum'''</big>
    </div>
    <div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
    </div>
    <div class="card-footer">
<small class="text-muted">[[Lorem ipsum|Lorem ipsum...]]</small>
    </div>
  </div>
</div>

If you add more than three cards you will need to hide the table of contents automatically generated by MediaWiki by also adding the behaviour switch __NOTOC__ to the page.

2 cards in a row

Result

Lorem ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum...

Lorem ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum...

Code

<div class="card-deck">
  <div class="card">
    <div class="card-header">
<big>'''Lorem ipsum'''</big>
    </div>
    <div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
    </div>
    <div class="card-footer">
<small class="text-muted">[[Lorem ipsum|Lorem ipsum...]]</small>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
<big>'''Lorem ipsum'''</big>
    </div>
    <div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
    </div>
    <div class="card-footer">
<small class="text-muted">[[Lorem ipsum|Lorem ipsum...]]</small>
    </div>
  </div>
</div>

This wiki contains content from the Bootstrap homepage, licensed Commons Attribution 3.0 Unported (CC BY 3.0). Thank you to everyone for creating outstanding content!