Card extension example 2
From Bootstrap for MediaWiki
| Component | ||
|---|---|---|
| Name | Card | |
| Description | Collapsible cards, border colors and section styles with the BootstrapComponents extension | |
| Provider | BootstrapComponents | |
| Reference | BootstrapComponents Extension docs - card | |
| Styling | For all possible color styles and corresponding examples, see colors. | |
Collapsible card
- Code
<bootstrap_card header="Click this header" collapsible style="max-width: 24rem;">
The body of a collapsible card opens and closes when you click the header.
</bootstrap_card>
- Result
Click this header
The body of a collapsible card opens and closes when you click the header.
Collapsible card, open at first
- Code
<bootstrap_card header="Click this header to close the body" collapsible active style="max-width: 24rem;">
With the <code>active</code> attribute, a collapsible card starts open.
</bootstrap_card>
- Result
Click this header to close the body
With the active attribute, a collapsible card starts open.
Border and text color
- Code
<bootstrap_card color="success" header="Header" style="max-width: 24rem;">
The <code>color</code> attribute colors the border and the text. The <code>background</code> attribute colors the whole card.
</bootstrap_card>
- Result
Header
The color attribute colors the border and the text. The background attribute colors the whole card.
- Code
<bootstrap_card header="Header" footer="Footer" header-style="text-align: center;" body-style="font-style: italic;" footer-style="text-align: right;" style="max-width: 24rem;">
The attributes <code>header-style</code>, <code>body-style</code> and <code>footer-style</code> add CSS to each part of the card.
</bootstrap_card>
- Result
Header
The attributes header-style, body-style and footer-style add CSS to each part of the card.
