Bootstrap: Cards and Badges
Een veelgebruikt iets in BS zijn Cards. Dit zijn omrande containers met padding, bijvoorbeeld voor de korte profielschets van werknemers in een bedrijf. BS biedt opties voor headers, footers, kleuren, …
| Klasse | Functionaliteit |
| .card | Basisklasse om een card aan te maken, heeft geen padding |
| .card-body | Bouwsteen van een card waarmee je een gedeelte met padding kan verkrijgen |
| .card-title | Een titel voor de card |
| .card-subtitle | Een subtitel voor de card |
| .card-text | Algemene tekst inhoud voor de card |
| .card-link | Een link binnen de card |
| .card-img-top | Een afbeelding toevoegen bovenaan in een card |
| .card-img-overlay | Een afbeelding als achtergrond gebruiken voor een card |
| .stretched-link | Een hele card aanklikbaar maken voor de link binnenin de card |
| .card-deck | Als we een parent div hebben voor meerdere cards dan kunnen we deze als card deck definiëren zodat we een grid verkrijgen waarin alle cards eenzelfde hoogte en breedte hebben. Wanneer je hier nieuwe cards in toevoegt wordt de hoogte en breedte automatisch aangepast indien nodig. |
Je kan bijvoorbeeld een card aanmaken zoals dit:
<div class="card" style="width:400px">
<img class="card-img-top" src="img/2.jpg" alt="Mijn Card" style="width:100%">
<div class="card-body">
<h4 class="card-title">Mr Bootstrap</h4>
<p class="card-text">Mijn job is om layout en functionaliteit aan te brengen waar nodig</p>
<a href="#" class="btn btn-primary">Bekijk mijn portfolie hier</a>
</div>
</div>Het resultaat is iets dergelijks:
Dit ziet er best wel professioneel uit en kost ons weinig werk (als we de juiste klassenamen kennen en kunnen gebruiken).
Een andere veelgebruikte feature met enkele gelijkenissen staat gekend als Badges. Dit zijn een soort van cards waarbij je enkel een kleine tekst inhoud hebt, bijvoorbeeld om aan te geven hoeveel mensen een commentaar hebben geschreven op je blog: dat aantal kan dan als Badge worden toegevoegd.
| Klasse | Functionaliteit |
| .badge | Basisklasse voor een badge aan te maken |
| .badge-primary | Geeft de badge de achtergrondkleur van de primaire kleur van bootstrap |
| .badge-pill | Maakt de badge in de vorm van een pilletje door de randen meer af te ronden |
Het resultaat van deze code kan je hieronder ook zien:
<button class="btn btn-info">
Hello <span class="badge badge-warning"> 7 </span>
</button>