Card deck example 2

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

Updated for Bootstrap 5. Parts of this page's Bootstrap 4 code no longer work with Bootstrap 5. Wikis moving to Bootstrap 5, for example with Chameleon 6, need to update such content too. See the Bootstrap 4 version of this page.

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

Card deck with a header

3 cards in a row

Result

Lorem ipsum

Card title

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

Card title

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

Card title

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="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <div class="card-header">
<big>'''Lorem ipsum'''</big>
      </div>
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <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>
        <p class="card-text">
<small class="text-muted">[[Lorem ipsum|Lorem ipsum...]]</small>
        </p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-header">
<big>'''Lorem ipsum'''</big>
      </div>
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <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>
        <p class="card-text">
<small class="text-muted">[[Lorem ipsum|Lorem ipsum...]]</small>
        </p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-header">
<big>'''Lorem ipsum'''</big>
      </div>
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <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>
        <p class="card-text">
<small class="text-muted">[[Lorem ipsum|Lorem ipsum...]]</small>
        </p>
      </div>
    </div>
  </div>
</div>

2 cards in a row

Result

Lorem ipsum

Card title

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

Card title

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="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card h-100">
      <div class="card-header">
<big>'''Lorem ipsum'''</big>
      </div>
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <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>
        <p class="card-text">
<small class="text-muted">[[Lorem ipsum|Lorem ipsum...]]</small>
        </p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-header">
<big>'''Lorem ipsum'''</big>
      </div>
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <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>
        <p class="card-text">
<small class="text-muted">[[Lorem ipsum|Lorem ipsum...]]</small>
        </p>
      </div>
    </div>
  </div>
</div>