Bootstrap-kaarten zijn een essentieel hulpmiddel voor het organiseren en presenteren van inhoud in webprojecten. Ze bieden een eenvoudige maar veelzijdige manier om visueel aantrekkelijke lay-outs te creëren die naadloos aanpassen aan verschillende apparaten. Tegen het einde van dit artikel weet je hoe je Bootstrap-kaartcomponenten effectief kunt gebruiken in je projecten.
Waarom kiezen voor Bootstrap?
Bootstrap blijft een van de meest populaire frameworks voor het bouwen van responsieve en mobielvriendelijke weblay-outs. De belangrijkste voordelen zijn onder andere:
- Snelle en eenvoudige responsieve vormgeving: Je hebt alleen basiskennis van HTML en CSS nodig om prachtige lay-outs te creëren.
- Mobile-First benadering: Bootstrap geeft prioriteit aan mobiele responsiviteit vanaf de basis.
- Browsercompatibiliteit: Het werkt feilloos op alle belangrijke browsers.
- Flexbox-aangedreven gridsysteem: Vereenvoudigt uitlijnings- en afstandstaken.
- Uitgebreide componenten: Een breed scala aan herbruikbare elementen zoals knoppen, modals en kaarten.
De nieuwste versie van Bootstrap introduceert aanzienlijke verbeteringen, zoals ondersteuning voor Flexbox en het veelzijdige kaartcomponent, dat oudere componenten zoals panelen en miniaturen vervangt.
Belangrijkste punten
Bootstrap-kaarten zijn veelzijdige tools voor het maken van georganiseerde, responsieve lay-outs. Ze stellen u in staat om verschillende soorten inhoud weer te geven, zoals tekst, afbeeldingen en multimedia, binnen een stijlvolle container. Hieronder staan enkele belangrijke kenmerken die ze onmisbaar maken voor ontwikkelaars:
- Gebruiksgemak: U kunt snel een kaart maken door elementen zoals div class=”card-body” te combineren, wat het inhoudsgebied definieert, en p class=”card-text”, waar tekstuele informatie staat.
- Ondersteuning voor Meerdere Inhoudstypen: Voeg een kaarttitel, afbeeldingen of lijstgroepen toe om uw inhoud effectief te structureren.
- Responsiviteit: Met behulp van Bootstrap’s grid en breakpoints kunnen kaarten zich aanpassen aan elk apparaatformaat, van mobiel tot desktop.
- Aanpasbaar Ontwerp: Hulpprogramma-klassen stellen u in staat om het uiterlijk aan te passen, inclusief kleuren, randen en tekstuitlijning.
- Geavanceerde Lay-outs: Functies zoals kaartgroepen, decks en metselwerklay-outs maken naadloze uitlijning en organisatie mogelijk.
Wat is het Bootstrap-kaartcomponent?
Bootstrap introduceert een veelzijdig en modern UI-component genaamd kaarten, die dienen als flexibele en stijlvolle containers voor het weergeven van verschillende soorten inhoud. Met minimaal standaardontwerp kunnen Bootstrap-kaarten eenvoudig worden verbeterd met behulp van de brede selectie hulpprogramma-klassen.
Deze component is gebouwd bovenop Flexbox, waardoor precieze uitlijning en ruimte mogelijk is. Ontwikkelaars kunnen Bootstrap’s ruimtehulpprogramma’s gebruiken om marges en padding effectief te beheren.
Kaarten kunnen gemakkelijk verschillende soorten inhoud bevatten zoals titel, subtitel, hoofdtekst en afbeeldingen, en optionele koptekst- en voettekstsecties. U kunt ook verschillende secties (kaartblokken) opnemen om verschillende soorten kaarten te construeren, afhankelijk van uw gebruik.
Belangrijke Bootstrap Card-klassen
Hieronder staan de belangrijkste hulpprogrammaklassen voor Bootstrap-kaarten, samen met hun doel:
- kaart: De hoofdcontainerklasse die het kaartcomponent definieert.
- kaart-body: Maakt het primaire inhoudsgebied binnen de kaart.
- kaart-titel: Stileert de titel van de kaart, meestal gebruikt met kop-tags zoals <h5>.
- kaart-tekst: Gebruikt voor standaard tekstuele inhoud binnen de kaart.
- kaart-koptekst: Voegt een gestileerde koptekstsectie toe bovenaan de kaart.
- kaart-voettekst: Voegt een gestileerde voettekstsectie toe onderaan de kaart.
- kaart-img-boven: Plaatst een afbeelding bovenaan de kaart.
- kaart-img-onder: Plaatst een afbeelding onderaan de kaart.
- lijst-groep: Maakt een lijstgroep binnen de kaart.
- lijst-groep-item: Stileert individuele items in de lijstgroep.
- kaartgroep: Groepeert meerdere kaarten samen met gelijke breedte en hoogte.
- kaartdeck: Lijnt meerdere kaarten uit met tussenruimte, verouderd in Bootstrap 5.
- tekst-*: Hulpprogramma-klassen voor tekstkleurstyling (bijv., tekst-primary, tekst-succes).
- bg-*: Hulpprogramma-klassen voor achtergrondkleurstyling (bijv., bg-licht, bg-donker).
Deze beknopte samenvatting somt de essentiële klassen op die worden gebruikt om Bootstrap-kaarten te bouwen en aan te passen.
Hoe Bootstrap in uw project opnemen
U kunt moeiteloos Bootstrap in uw project gebruiken door het in te sluiten vanaf een Content Delivery Network (CDN) of door de benodigde bestanden te downloaden van getbootstrap.com
Voor dit voorbeeld zullen we laten zien hoe u een eenvoudige HTML-pagina opzet met behulp van een CDN om het Bootstrap-kaartcomponent op te nemen. Met deze methode kunt u snel kaarten maken en stijlen zonder in te gaan op aanvullende configuratie.
Volg de onderstaande stappen om uw index.html-bestand te maken en Bootstrap 5.3.3 op te nemen:
<!doctype html>
<html lang="en">
<head>
<!-- Verplichte metatags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title>Bootstrap Card Example</title>
</head>
<body>
<div class="container mt-5">
<div class="card" style="width: 18rem;">
<div class="card-header bg-primary text-white">
Example Card Header
</div>
<div class="card-body">
<h5 class="card-title">Example Card Title</h5>
<p class="card-text">This is an example card created using Bootstrap 5. It includes styling for the
header, title, and text.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<!-- Bootstrap-bundel met Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>We hebben de Bootstrap-bestanden via een CDN opgenomen, waardoor de nieuwste versie van het framework altijd beschikbaar is. Er is een containerdivisie toegevoegd om als basis voor uw inhoud te dienen, zodat u direct kunt beginnen met het bouwen met het Bootstrap-kaartcomponent.
Voor meer details kunt u de starter-templatedocumentatie verkennen.
Het maken van eenvoudige Bootstrap-kaarten
Volg deze stappen om een eenvoudige kaart te maken:
- Gebruik de .kaart klasse met een <div> tag om de buitenste container te maken.
- Voeg de klasse .card-body toe aan een binnenste <div> tag om het kaartlichaam te definiëren.
- Gebruik de klassen .card-title en .card-subtitle met kop tags (<h5> en <h6>) om de kaarttitel en subtitel toe te voegen.
- Gebruik de klasse .card-text met <p> tags om tekstuele inhoud toe te voegen.
- Gebruik de .card-img-top klasse met de <img> tag om een afbeelding bovenaan de kaart toe te voegen.
Dit zijn de fundamentele bouwstenen van een basis kaartlay-out. Hier is een voorbeeld:
<div class="card" style="width: 30rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Deze code genereert een kaart met een afbeelding, titel, subtitel, tekst en een knop, en past zich aan aan de breedte van de oudercontainer, tenzij anders is gespecificeerd met behulp van de eigenschap style=”width: 30rem;”.
Dit is een schermafbeelding van het resultaat:
Horizontale kaarten in Bootstrap
Horizontale kaarten stellen u in staat om inhoud weer te geven in een lay-out naast elkaar, waardoor ze ideaal zijn voor compacte en georganiseerde ontwerpen. U kunt ze maken met behulp van gridklassen voor responsief gedrag, waardoor de kaart er op alle apparaten geweldig uitziet.
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="https://picsum.photos/id/0/800" class="img-fluid rounded-start" alt="Image">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is a card with text beside an image, perfect for showcasing content
side-by-side.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>Dit is een schermafbeelding van het resultaat:
Lijstgroepen in Bootstrap-kaarten
Bootstrap stelt u in staat om uw kaarten te verbeteren door lijstgroepen op te nemen, waardoor het gemakkelijker wordt om gestructureerde en georganiseerde inhoud weer te geven. De klassen list-group en list-group-flush integreren naadloos binnen kaarten, zodat ontwikkelaars visueel aantrekkelijke lijsten kunnen maken.
Zo kunt u een kaart maken met een flush-lijstgroep:
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
Functionaliteiten van de kaart verbeteren
Headers en voetteksten toevoegen
U kunt uw kaarten verbeteren door headers en voetteksten op te nemen met de klassen .card-header en .card-footer. Hier is een voorbeeld:
<div class="row">
<div class="col-sm-3">
<div class="card">
<div class="card-header">
This is a header
</div>
<img class="card-img-top" src="https://source.unsplash.com/daily" alt="Card image top">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<h4 class="card-subtitle">Card subtitle</h4>
<p class="card-text">This is a simple Card example</p>
</div>
<div class="card-footer">
This is a footer
</div>
</div>
</div>
</div> Dit is de schermafbeelding van het resultaat:
Deze lay-out voegt meer context toe aan de kaart met een gestileerde header en footer.
Tekst over afbeeldingen plaatsen
Gebruik .card-img-overlay om inhoud boven op de afbeelding te plaatsen. Door eenvoudig de klasse card-body te vervangen door de klasse card-img-overlay, kunnen we de afbeelding als overlay gebruiken:
<div class="card" style="width: 30rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<div class="card-img-overlay">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Dit is een schermafbeelding van het resultaat:
Card-afbeeldingskappen toevoegen
Voeg afbeeldingen toe aan de boven- of onderkant van de kaart met .card-img-top of .card-img-bottom.
<div class="card" style="width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<p class="card-text">This card has an image cap at both the top and bottom.</p>
</div>
<img src="https://picsum.photos/id/0/800" class="card-img-bottom" alt="Card image bottom">
</div>Dit is een schermafbeelding van het resultaat:
De boven- en onderafbeeldingen van de kaart worden beeldcaps genoemd.
Responsief ontwerp met Bootstrap-kaarten
Responsief ontwerp zorgt ervoor dat uw kaarten er op alle apparaten geweldig uitzien. Gebruik het Bootstrap grid-systeem om de lay-out te beheren.
Voorbeeldcode
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/85/800" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>Dit is een schermafbeelding van het resultaat:
Hoogte en breedte van Bootstrap-kaarten aanpassen
Om een specifieke breedte voor een kaart in te stellen, kunt u de style-attribuut gebruiken of de hulpprogramma-klassen van Bootstrap. Hier is een voorbeeld:
<div class="card" style="width: 10rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is a simple card example with a custom width.</p>
</div>
</div>Dit is een schermafbeelding van het resultaat:
De breedte van deze kaart is beperkt tot 10rem, wat kan worden aangepast aan uw ontwerpeisen.
Normaal gesproken wordt de hoogte van de kaart aangepast om de inhoud van de kaart verticaal passend te maken, maar we kunnen deze ook beheren met behulp van aangepaste CSS (bijvoorbeeld style=”hoogte: 10rem;”) of Bootstrap’s dimensioneringshulpprogramma’s (bijvoorbeeld <div class=”kaart h-200″>).
Let op dat de nieuwste versie van Bootstrap is overgestapt op rem eenheden in plaats van px eenheden omdat rem een schaalbare meeteenheid is — dus het werkt beter met gebruikersinstellingen, waardoor tekst veel toegankelijker wordt. Het resultaat is dat alle elementen op de pagina meeschalen met de schermgrootte.
Je kunt meer leren over de nieuwe functies van Bootstrap in het artikel van SitePoint getiteld “Bootstrap: Super Slimme Functies om je te overtuigen”.
Het gebruiken van het Grid Systeem om de Breedte te Controleren
Een andere optie om de breedte van het Bootstrap-kaartcomponent te controleren is door gebruik te maken van het Bootstrap-grid (rijen en kolommen):
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example card using the grid system.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Another Card</h5>
<p class="card-text">This card sits next to the first one.</p>
</div>
</div>
</div>
</div>Dit is een schermafbeelding van het resultaat:
In dit voorbeeld worden twee kaarten naast elkaar weergegeven, elk vier kolommen innemend (col-md-4) op medium en grotere schermen.
Kaartstijlen
Bootstrap biedt diverse opties om kaarten aan te passen, inclusief achtergrondkleuren, randen en tekststijlen.
Achtergrond- en Tekstkleuren
Je kunt de achtergrond- en tekstkleuren van een kaart wijzigen met behulp van hulpprogrammaklassen zoals .bg-primary of .text-white.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body">
<h5 class="card-title">Primary Card Title</h5>
<p class="card-text">Quick text to demonstrate card styling.</p>
</div>
</div>Randkleuren
Gebruik .border-{kleur}-klassen om de randkleur van je kaarten aan te passen. Tekst binnen de kaart kan ook worden gestileerd met .tekst-{kleur}.
<div class="card border-success mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-success">
<h5 class="card-title">Success Card Title</h5>
<p class="card-text">Simple content styled with a border.</p>
</div>
</div>Transparante headers en voetteksten
Verwijder de achtergrondkleur van headers en voetteksten met behulp van .bg-transparant en pas hun randen aan.
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-info">Header</div>
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-info">
<h5 class="card-title">Info Card Title</h5>
<p class="card-text">Example content inside a card.</p>
</div>
<div class="card-footer bg-transparent border-info">Footer</div>
</div>Combineren van achtergronden en randen
Combineer achtergrond- en randhulpprogramma’s voor unieke styling.
<div class="card bg-light border-dark mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-dark">
<h5 class="card-title">Mixed Style Card</h5>
<p class="card-text">Custom card combining background and border.</p>
</div>
</div>Hier is het resultaat waarin vier verschillende kaartstijlen worden getoond in een enkele rijindeling:
Bootstrap stelt je in staat kaarten te maken met verschillende koptekststijlen
- ‘koptekst primaire kaart titel’ voor hoofdsecties
- ‘koptekst lichte kaart titel’ voor subtiele ontwerpen
- ‘koptekst secundaire kaart titel’ voor kaarten met ondersteunende tekst.
- ‘koptekst donkere kaart titel’ voor gedurfde looks
- ‘koptekst succes kaart titel’ voor positieve berichten
- ‘koptekst gevaar kaart titel’ voor waarschuwingen.
Met deze veelzijdige kaartstijlopties, kun je ook unieke ontwerpen creëren zoals een “koptekst waarschuwing kaart titel”, “koptekst informatie kaart titel” om kritieke informatie te benadrukken of de aandacht te vestigen op specifieke details naadloos.
Navigatie toevoegen
Nog een leuke functie van het Bootstrap-kaartcomponent is de mogelijkheid om geavanceerde navigatiepatronen toe te voegen aan de koptekstsectie zoals tabbladen en navigatiepillen.
Tabbladen toevoegen aan de kaartkop
Om tabbladen op te nemen in de koptekst van de kaart, gebruikt u de klassen .nav-tabs en .card-header-tabs op een ongeordende lijst (<ul>). Hier is een voorbeeld:
<div class="card" style="width: 30rem;">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab 2</a>
</li>
</ul>
</div>
<div class="card-body">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<h5 class="card-title pt-3">Card with Tabs</h5>
<p class="card-text">This card includes a tabbed navigation element in its header.</p>
</div>
</div>Dit is de schermafbeelding van het resultaat:
Tabbladen toevoegen aan de kaartkop
Op dezelfde manier kunnen we navigatietabbladen toevoegen door eenvoudigweg .nav-tabs te vervangen door .nav-pills en .card-header-tabs door .card-header-pill op het <ul>-lijstelement:
<div class="card" style="width: 30rem;">
<div class="card-header">
<ul class="nav nav-pills card-header-pill">
<li class="nav-item">
<a class="nav-link active" href="#">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab 2</a>
</li>
</ul>
</div>
<div class="card-body">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<h5 class="card-title pt-3">Card with Tabs</h5>
<p class="card-text">This card includes a pill-style navigation element in its header.</p>
</div>
</div>Dit is de schermafbeelding van het resultaat:
U kunt meer informatie hierover vinden in de documentatie van de Bootstrap-navigatiecomponenten
Links toevoegen aan het Bootstrap-kaartonderdeel
We kunnen snel links toevoegen binnen kaarten door de <a>-tag te gebruiken met de klasse .card-link :
<div class="card">
<div class="card-body">
<h3 class="card-title">Adding Links</h3>
<p class="card-text">These are simple links</p>
<a href="#" class="card-link">Link 1</a>
<a href="#" class="card-link">Link 2</a>
</div>
<div class="card-footer">
This is a footer
</div>
</div>Dit is de schermafbeelding van het resultaat:
Uitlijnen en tekst transformeren in Bootstrap-kaartonderdelen
Bootstrap biedt teksthulpprogramma klassen om tekst uit te lijnen en te transformeren binnen een kaartcomponent. Voor tekstuitlijning kunt u de volgende klassen gebruiken:
- .text-start voor tekst links uitlijnen in de kaart
- .text-end voor tekst rechts uitlijnen in de kaart
- .text-center voor tekst centreren in de kaart
- .text-justify voor tekst rechtvaardigen in de kaart (van toepassing op oudere versies, afgeschaft in Bootstrap 5)
- .text-nowrap om te voorkomen dat tekst wordt afgebroken
Je kunt ook tekst transformeren met behulp van de volgende klassen:
- .text-lowercase om tekst naar kleine letters te transformeren
- .text-uppercase om tekst naar hoofdletters te transformeren
- .text-capitalize om de eerste letter van elk woord te kapitaliseren
Het aanpassen van achtergrond-, voorgrond- en randkleuren van de Bootstrap-kaartcomponent
Je kunt de achtergrond-, tekst- en randkleuren van een Bootstrap-kaart aanpassen met behulp van hulpprogrammaklassen voor tekst en achtergrond. Hier zijn enkele voorbeelden:
- Tekstkleuren: Gebruik .text-primary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark, of .text-white om de tekstkleur te veranderen.
- Achtergrondkleuren: Gebruik .bg-primary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark, of .bg-white om de achtergrondkleur te veranderen.
- Randkleuren: Gebruik .border-primary, .border-success, .border-danger, .border-warning, .border-info, .border-light, .border-dark, of .border-white om de randkleur te stijlen.
De CodePen-demo hieronder toont alle verschillende soorten kaarten die we kunnen maken met Bootstrap. Voel je vrij om ermee te experimenteren:
Het maken van geavanceerde lay-outs met de Bootstrap-kaartcomponent
De Bootstrap-kaart is een veelzijdige UI-component die veel wordt gebruikt in moderne web lay-outs om gemengde inhoudstypen (zoals tekst en afbeeldingen) weer te geven als een enkele entiteit of gegroepeerde collecties.
Kaarten zijn bijzonder nuttig voor responsief design en worden vaak toegepast in lay-outs zoals de Masonry lay-out, ook bekend als de Pinterest-achtige lay-out.
Kaarten kunnen worden gebruikt om lay-outs te maken voor fotogalerijen, blogberichten of e-commerce producten. Belangrijke platforms zoals Google en Facebook maken uitgebreid gebruik van kaarten om inhoud te organiseren en weer te geven op hun webapplicaties.
Voorheen vereiste het bouwen van dergelijke geavanceerde lay-outs diepgaande kennis van CSS en HTML. Met de nieuwste functies van Bootstrap kunnen ontwikkelaars echter moeiteloos responsieve en visueel aantrekkelijke kaartgebaseerde lay-outs maken.
Klassen zoals .card-group, .card-deck en .card-columns vereenvoudigen het proces van het organiseren van kaarten met consistente opmaak en uitlijning.
Samenvoegen/Inneste-len van Kaarten
Kaartgroepen in Bootstrap zijn een efficiënte manier om meerdere kaartcomponenten weer te geven als een enkele, verbonden entiteit met uniforme breedte en hoogte.
Deze lay-out wordt bereikt door gebruik te maken van de display: flex; eigenschap, waardoor alle kaarten perfect uitgelijnd zijn. Het is bijzonder nuttig voor responsief design en moderne weblay-outs waar consistente kaartafmetingen essentieel zijn.
Om een groep kaarten te maken, gebruikt u de .card-group klasse als een wrapper div die individuele kaarten bevat.
Hier is een voorbeeld dat een groep van drie kaarten laat zien:
<div class="card-group">
<div class="card text-white">
<img class="card-img-top" src="https://source.unsplash.com/featured/" alt="Card image top">
<div class="card-img-overlay">
<div class="card-group">
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/475/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 1</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">This is an example of a grouped card.</p>
</div>
</div>
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/58/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 2</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">Grouped cards ensure uniform styling.</p>
</div>
</div>
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/75/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 3</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">They are responsive and visually appealing.</p>
</div>
</div>
</div>Dit is een schermafbeelding van het resultaat:
Zoals te zien is, zijn de drie kaarten aan elkaar bevestigd en hebben ze dezelfde breedte en hoogte.
Card Decks
In eerdere versies van Bootstrap werd .card-deck gebruikt om kaartlay-outs te maken waarbij kaarten dezelfde breedte en hoogte hadden maar niet aan elkaar bevestigd waren. In Bootstrap 5 wordt echter het gridsysteem aanbevolen voor dit doel. Deze aanpak biedt meer flexibiliteit en responsiviteit.
Om een vergelijkbare lay-out te bereiken, gebruik de .row class met .col om kaartafstand en -uitlijning te regelen. Hier is een voorbeeld:
<div class="row row-cols-1 row-cols-md-3 g-4">
Zoals we kunnen zien, zijn de kaarten van dezelfde grootte met wat ruimte tussen hen.
Card Columns
In eerdere versies van Bootstrap werd de .card-columns class gebruikt om een lay-out te maken die lijkt op Masonry, waarbij kaarten van boven naar beneden en van links naar rechts werden toegevoegd. In Bootstrap 5 is deze functie echter verwijderd.
Om een vergelijkbare lay-out te bereiken, kunt u het gridsysteem gebruiken in combinatie met de CSS Masonry lay-out of een JavaScript-plug-in zoals Masonry.js voor complexere gedragingen.
Zo maakt u een eenvoudige Masonry-stijl lay-out met behulp van het gridsysteem en CSS:
Optimaliseren van Prestaties
Efficiënte prestaties zijn cruciaal voor het maken van Bootstrap-kaarten die snel laden en naadloos aanpassen. Hier zijn praktische technieken om de prestaties te verbeteren bij het integreren van Bootstrap-kaartcomponenten zoals div class card body en h5 class card title.
Lui Laden van Afbeeldingen
Lazy loading vertraagt het laden van afbeeldingen totdat ze zichtbaar zijn in het viewport, waardoor de paginasnelheid wordt geoptimaliseerd. Gebruik de attribuut loading=”lazy” met card img top voor een efficiënte oplossing.
<img src="https://picsum.photos/300/200" loading="lazy" class="card-img-top" alt="Lazy Loaded Image">Optimaliseer Afbeeldingsgroottes
Verklein afbeeldingen zodat ze passen binnen de afmetingen van hun container, waardoor snellere laadtijden worden gegarandeerd. Gebruik img-fluid met div class card img om afbeeldingen automatisch te schalen.
<img src="https://picsum.photos/300/200" class="card-img-top img-fluid" alt="Resized Image">Dit zorgt ervoor dat de card img top perfect past, ongeacht de breedte van het ouderlijke element.
Minimaliseer CSS en JavaScript
Minimaliseer stijlen en scripts om bestandsgroottes te verkleinen. Combineer meerdere div class card header elementen en minimaliseer aangepaste CSS voor snellere weergave.
Geoptimaliseerd Voorbeeld
In plaats van herhaalde of aangepaste stijlen toe te passen zoals dit:
<div class="card" style="border: 1px solid blue; text-align: center; padding: 20px;">
<div class="card-body">
<h5 style="font-size: 1.5rem; font-weight: bold;">Custom CSS Header</h5>
<p style="font-size: 1rem; color: #555;">This card uses inline styles, which are inefficient.</p>
</div>
</div>Gebruik Bootstrap’s hulpprogramma klassen voor een schonere en beter onderhoudbare structuur:
<div class="card border-primary text-center p-3">
<div class="card-body">
<h5 class="card-title text-uppercase fw-bold">Utility Classes Header</h5>
<p class="card-text text-secondary">Using Bootstrap's utility classes ensures better performance and maintainability.</p>
</div>
</div>Gebruik SVG’s voor Pictogrammen
SVG’s zijn lichtgewicht en schaalbaar, waardoor ze ideaal zijn voor card headers en decoratieve elementen. Ze laden sneller en behouden scherpte op alle apparaten.
Voorbeeld
<div class="card text-center">
<div class="card-header bg-success text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi bi-check-circle" fill="currentColor">
<path d="M16 8.98l.686-.688L7.733.011 6.023 1.72 14.98 10.676z"/>
</svg>
<h5 class="card-title">SVG Optimized Header</h5>
</div>
<div class="card-body">
<p class="card-text">SVGs provide clear visuals with minimal overhead.</p>
</div>
</div>Laad Bronnen Vooraf en Prefetch
Gebruik rel=”preload” om kritieke bronnen te laden en rel=”prefetch” voor het anticiperen op toekomstige behoeften. Dit is vooral handig voor zware card inhoud.
Voorbeeld
<link rel="preload" href="https://example.com/styles.css" as="style">
<link rel="prefetch" href="https://example.com/next-page.html">Verminder DOM Complexiteit
Vermijd overdreven geneste div class card structuren die de weergave kunnen vertragen. Vereenvoudig lay-outs om de prestaties te optimaliseren.
Voor optimalisatie
<div class="card">
<div class="card-body">
<div>
<div>
<p>Nested Content</p>
</div>
</div>
</div>
</div>Na optimalisatie
<div class="card">
<div class="card-body">
<p class="card-text">Optimized Content</p>
</div>
</div>Optimaliseer lettertypen
Laad aangepaste lettertypen vooraf in of gebruik systeemlettertypen om latentie te verminderen. Een schone div-klasse kaart body kan de visuele aantrekkingskracht van je kaarten verder benadrukken.
Voorbeeld
<div class="card">
<div class="card-body" style="font-family: 'Roboto', sans-serif;">
<h5 class="card-title">Optimized Font</h5>
<p class="card-text">Preloading ensures faster rendering for card content.</p>
</div>
</div>Conclusie
De Bootstrap-kaartcomponent is een krachtige toevoeging aan het Bootstrap-framework, waarmee ontwikkelaars moderne webpagina’s kunnen maken zonder diep in te gaan op hoe CSS werkt. Je kunt kaartlay-outs toevoegen om afbeeldingsgalerijen, dashboardwidgets en blogposts of producten voor een e-commerce website weer te geven door CSS-klassen toe te voegen.
Als gevolg van de nieuwe functies en componenten blijft Bootstrap een krachtig CSS-framework dat beschikbaar is voor iedereen, met name voor ontwikkelaars die hun eigen responsieve en moderne lay-outs moeten maken, maar niet genoeg tijd en budget hebben of niet over de diepgaande kennis van CSS beschikken die nodig is om aangepaste code te produceren.
Als je de basis van Bootstrap onder de knie hebt en je afvraagt hoe je je Bootstrap-vaardigheden naar een hoger niveau kunt tillen, bekijk dan onze Building Your First Website with Bootstrap 4 cursus voor een snelle en leuke kennismaking met de kracht van Bootstrap.
Veelgestelde vragen over het beheersen van Bootstrap-kaartcomponenten voor responsief ontwerp
Wat is een Bootstrap-kaartcomponent?
Een Bootstrap Card Component is een moderne en flexibele container voor inhoud, waarmee je visueel aantrekkelijke indelingen kunt maken voor tekst, afbeeldingen en multimedia. Cards maken deel uit van het Bootstrap-framework, dat is ontworpen om ontwikkelaars te helpen informatie op een responsieve en mobielvriendelijke manier te organiseren.
Hoe maak ik een Bootstrap Card Component?
Het maken van een Bootstrap Card Component is eenvoudig. Je kunt een div met de class card gebruiken als container en inhoud zoals titels, tekst en afbeeldingen erin toevoegen. Hier is een voorbeeld:
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example of a Bootstrap card body.</p>
</div>
</div>Hoe stel ik de hoogte en breedte van een Card in Bootstrap in?
Je kunt de breedte en hoogte van een Bootstrap card aanpassen met inline stijlen of Bootstrap’s utility classes. Bijvoorbeeld:
<div class="card" style="width: 20rem; height: 15rem;">
<div class="card-body">
<h5 class="card-title">Custom Card</h5>
<p class="card-text">This card has a custom height and width.</p>
</div>
</div>Daarnaast kun je ook card hoogte Bootstrap utility classes zoals w-50 of h-100 gebruiken om de card-afmetingen responsief in te stellen.
Hoe wijzig ik de grootte van een Card in Bootstrap?
Om een card te vergroten of te verkleinen, kun je card grootte Bootstrap utility classes zoals w-25, w-50 of w-75 voor de breedte gebruiken, en h-auto of h-100 voor de hoogte. Dit zorgt ervoor dat je card zich aanpast aan de indeling zonder extra CSS te hoeven toevoegen. Hier is een voorbeeld:
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Responsive Card</h5>
<p class="card-text">This card resizes based on its parent container.</p>
</div>
</div>Hoe maak ik een Card Titel in Bootstrap?
Om een titel aan je card toe te voegen, gebruik je een <h5>-element met de class=”card-title”. Deze class zorgt ervoor dat de titel consistent wordt gestyled volgens de ontwerpstandaarden van Bootstrap.
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example of a Bootstrap card with a title.</p>
</div>
</div>Hoe kan ik de card-body class in Bootstrap gebruiken?
De class card-body is een hulpprogramma klasse die padding biedt en de inhoud binnen een Bootstrap kaart organiseert. Het is de hoofdcontainer voor de inhoud van een kaart.
<div class="card">
<div class="card-body">
<h5 class="card-title">Using card-body</h5>
<p class="card-text">This is the content inside the card-body section.</p>
</div>
</div>Hoe de grootte van een Bootstrap kaart aanpassen?
Om de grootte van een kaart aan te passen, pas specifieke breedte en hoogte toe met behulp van inline stijlen of hulpprogramma klassen. Bijvoorbeeld:
<div class="card" style="width: 250px; height: 300px;">
<img src="https://picsum.photos/250/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Fixed Size Card</h5>
<p class="card-text">This card has a fixed size for consistency.</p>
</div>
</div>Hoe kaartgrootte aanpassen in Bootstrap?
De grootte van een kaart kan dynamisch worden aangepast met behulp van Bootstrap’s hulpprogramma klassen of CSS Grid. Hier is een voorbeeld van responsieve kaartgrootte:
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Adjustable size based on parent grid.</p>
</div>
</div>
</div>
</div>Kan ik Bootstrap kaartachtergronden en randen aanpassen?
Ja, Bootstrap biedt uitgebreide aanpassingsmogelijkheden met hulpprogramma klassen. Gebruik bg-primary voor achtergrondkleuren en border-success voor randstijlen. Voorbeeld:
<div class="card bg-info border-danger">
<div class="card-body">
<h5 class="card-title">Custom Background</h5>
<p class="card-text">This card has a custom background and border.</p>
</div>
</div>Hoe kan ik afbeeldingen gebruiken met kaarten?
Bootstrap ondersteunt afbeeldingen binnen kaarten met behulp van card-img-top of card-img-bottom. Voorbeeld:
<div class="card">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card with Image</h5>
<p class="card-text">This card includes a top image.</p>
</div>
</div>Hoe div class card-body gebruiken in Bootstrap?
De div class card-body in Bootstrap definieert het hoofdinhoudsgebied binnen een kaart. Het biedt padding en zorgt voor consistente ruimte voor tekst, afbeeldingen en andere elementen binnen de kaart.
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is some text within a card body.</p>
</div>
</div>Wat is p class card-text in Bootstrap?
De p class card-text in Bootstrap wordt gebruikt om tekstuele inhoud binnen de kaart-body te stijlen. Het past standaard typografie stijlen toe om de tekst er schoon en professioneel uit te laten zien.
<div class="card">
<div class="card-body">
<p class="card-text">This is an example of styled text inside a Bootstrap card.</p>
</div>
</div>Hoe kaartgrootte vergroten in Bootstrap?
Om de kaartgrootte te vergroten, pas de breedte en hoogte aan met behulp van w-100 voor volledige breedte of specificeer afmetingen met behulp van stijlen. Voorbeeld:
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Large Card</h5>
<p class="card-text">This card has an increased size for visibility.</p>
</div>
</div>Hoe kan ik kaarten dezelfde hoogte maken?
Gebruik .d-flex en .align-items-stretch:
<div class="row g-3">
<div class="col-md-4 d-flex">
<div class="card flex-fill">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Aligned with others.</p>
</div>
</div>
</div>Source:
https://www.sitepoint.com/bootstrap-card-component-introduction/