Card group example 7

Component
Name	Card group
Description	Card group in light mode and dark mode
Provider	Skin
Note	Dark mode needs the CSS marked "Bootstrap dark mode" on MediaWiki:Common.css, because the Chameleon skin leaves out Bootstrap's dark mode.
Reference	getbootstrap.com - color modes
Styling	For all possible color styles and corresponding examples, see colors.

Light mode

Code

<div class="card-group">
  <div class="card">
    <div class="card-body">
      <div class="card-title h5">Chameleon</div>
      <p class="card-text">A highly customizable skin that uses Bootstrap.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <div class="card-title h5">Medik</div>
      <p class="card-text">A simple skin that bundles its own copy of Bootstrap.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <div class="card-title h5">Tweeki</div>
      <p class="card-text">A skin that implements as much of Bootstrap as possible.</p>
    </div>
  </div>
</div>

Result

Chameleon

A highly customizable skin that uses Bootstrap.

Medik

A simple skin that bundles its own copy of Bootstrap.

Tweeki

A skin that implements as much of Bootstrap as possible.

Dark mode

The code is the same as for light mode, see Color modes.

Result