Sjabloon:Card
Inhoud
Omschrijving
Card component van Bootstrap 4.1
Zie ook https://getbootstrap.com/docs/4.1/components/card/
Parameters
- {{{body}}} of {{{1}}}
- {{{list}}}
- {{{header}}}
- {{{footer}}}
- {{{image top}}}
- {{{image bottom}}}
- {{{class}}} - HTML class. e.g. ml-3 d-none d-md-block
- {{{style}}} - HTML style. e.g. width: 300px; max-width: 100%;
Voorbeelden
Eenvoudige card
Code:
{{Card|Dit is een card}}
Result:
Dit is een card
Code:
{{Card
|header=Dit is een card header
|body=Dit is een card body
|footer=Dit is een card footer
}}
Resultaat:
Dit is een card header
Dit is een card body
Lijst
Code:
{{Card
|header=Dit is een card header
|list=
* Dit is een lijst
* Dit is een lijst
* Dit is een lijst
}}
Resultaat:
Dit is een card header
- Dit is een lijst
- Dit is een lijst
- Dit is een lijst
Afbeelding
Code:
{{Card
|image top=[[Bestand:Firefox-icon.png|link=|300px]]
|style=width: 300px; max-width: 100%;
|list=
* Dit is een lijst
* Dit is een lijst
* Dit is een lijst
}}
Resultaat:
- Dit is een lijst
- Dit is een lijst
- Dit is een lijst
Thema klasse
{{Card
|class=text-white bg-primary
|header=Dit is een card header
|body=Dit is een card body
|footer=Dit is een card footer
}}
Dit is een card header
Dit is een card body
{{Card
|class=text-white bg-secondary
|header=Dit is een card header
|body=Dit is een card body
|footer=Dit is een card footer
}}
Dit is een card header
Dit is een card body
{{Card
|class=text-white bg-success
|header=Dit is een card header
|body=Dit is een card body
|footer=Dit is een card footer
}}
Dit is een card header
Dit is een card body
{{Card
|class=text-white bg-danger
|header=Dit is een card header
|body=Dit is een card body
|footer=Dit is een card footer
}}
Dit is een card header
Dit is een card body
{{Card
|class=text-white bg-warning
|header=Dit is een card header
|body=Dit is een card body
|footer=Dit is een card footer
}}
Dit is een card header
Dit is een card body
{{Card
|class=text-white bg-info
|header=Dit is een card header
|body=Dit is een card body
|footer=Dit is een card footer
}}
Dit is een card header
Dit is een card body
{{Card
|class=bg-light
|header=Dit is een card header
|body=Dit is een card body
|footer=Dit is een card footer
}}
Dit is een card header
Dit is een card body
{{Card
|class=text-white bg-dark
|header=Dit is een card header
|body=Dit is een card body
|footer=Dit is een card footer
}}
Dit is een card header
Dit is een card body
Bootstrap voorziet in grote hoeveelheid zinvole behulpzame klasses voor layout en styling. Check het document.