Card – Basic cards in different styles.

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.

Footer Text

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.

This wiki contains content from the Bootstrap homepage, licensed Commons Attribution 3.0 Unported (CC BY 3.0). Thank you to everyone on this site for creating outstanding content!