Card group example 3
From Bootstrap - Demo Wiki
| Component | ||
|---|---|---|
| Name | Card group | |
| Description | Card group with an image in the header | |
| Provider | Skin | |
| Reference | getbootstrap.com - card groups | |
| Styling | For all possible color styles and corresponding examples, see colors. | |
Card group with an image in the header
- 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-group">
<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>
If you add more than three cards you will need to hide the table of contents automatically generated by MediaWiki by also adding the behaviour switch
__NOTOC__ to the page.
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;
}
