Card deck example 3
From Bootstrap for MediaWiki
| Component | ||
|---|---|---|
| Name | Card deck | |
| Description | Card deck with an image in the 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.
Card deck with an image in the header
3 cards in a row
- Result
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.
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.
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.
- Code
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
[[File:SunflowerField.jpg|link=|class=img-fluid]]
<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">
[[File:SunflowerField.jpg|link=|class=img-fluid]]
<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">
[[File:SunflowerField.jpg|link=|class=img-fluid]]
<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
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.
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.
- Code
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card h-100">
[[File:SunflowerField.jpg|link=|class=img-fluid]]
<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">
[[File:SunflowerField.jpg|link=|class=img-fluid]]
<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>
If you are on MediaWiki 1.40 and later the
img-fluid class will no longer work as expected. Until this is gets fixed for the skins making use of Bootstrap you will either need to set the $wgParserEnableLegacyMediaDOM configuration parameter to true or add the following CSS to your MediaWiki:Common.css page: /* MediaWiki
* Fix img-fluid regression in 1.40 and later
*/
.img-fluid .mw-file-element,
.img-fluid img {
max-width: 100% !important;
height: auto !important;
width: 100% !important;
}
.img-fluid .thumbinner {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
