Card deck example 3
| Component | ||
|---|---|---|
| Name | Card deck | |
| Description | Card deck with an image in the header | |
| Provider | Skin | |
| Reference | getbootstrap.com - card decks | |
| Styling | For all possible color styles and corresponding examples, see colors. | |
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="card-deck">
<div class="card">
[[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 class="card">
[[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 class="card">
[[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>
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="card-deck">
<div class="card">
[[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 class="card">
[[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>
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;
}
