Card example 2

Component
Name	Card
Description	Card 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" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <div class="card-title h5">Card title</div>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Result

Header

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Dark mode

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

Result

Header

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

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!