Card – Basic cards in different styles.

From Bootstrap - Demo Wiki
Component
Name Card
Description Basic cards in different styles.
Provider BootstrapComponents
Reference BootstrapComponents Extension docs - button
Styling For all possible color styles and corresponding examples, see colors.

Basic card

Code
<bootstrap_card background="primary" header="Header Text" style="width: 300px;">
Some quick example text that appears at the body of the card and fills the bulk of the card's content.
</bootstrap_card>
Result

Header Text

Some quick example text that appears at the body of the card and fills the bulk of the card's content.

Card wiht header image

Code
<bootstrap_card header-image="[[File:DSC02201_363.jpg]]" style="width: 300px;">
Some quick example text that appears at the body of the card and fills the bulk of the card's content.
</bootstrap_card>
Result

Some quick example text that appears at the body of the card and fills the bulk of the card's content.

Basice card with footer

Code
<bootstrap_card background="secondary" header="Header Text" footer="Footer Text" style="width: 300px;">
Some quick example text that appears at the body of the card and fills the bulk of the card's content.
</bootstrap_card>
Result

Header Text

Some quick example text that appears at the body of the card and fills the bulk of the card's content.

Basic card with footer image

Code
<bootstrap_card header="Header Text" footer-image="[[File:DSC02201_363.jpg]]" style="width: 300px;">
Some quick example text that appears at the body of the card and fills the bulk of the card's content.
</bootstrap_card>
Result

Header Text

Some quick example text that appears at the body of the card and fills the bulk of the card's content.

Basic card with custom inline CSS

Code
<bootstrap_card background="primary" header="Header Text" style="width: 300px; border: 2px solid black; border-radius: 2rem;">
Some quick example text that appears at the body of the card and fills the bulk of the card's content.
</bootstrap_card>
Result

Header Text

Some quick example text that appears at the body of the card and fills the bulk of the card's content.

Basic card with custom CSS class

Code
<bootstrap_card header="Header Text" style="width: 300px;" class="bootstrap-card-example">
Some quick example text that appears at the body of the card and fills the bulk of the card's content.
</bootstrap_card>

Add the following CSS either to MediaWiki:Common.css or to MediaWiki:Chameleon.css:

.bootstrap-card-example {
    box-shadow: 3px 3px 5px black;
}
Result

Header Text

Some quick example text that appears at the body of the card and fills the bulk of the card's content.