Bootstrap cards

• ICT
• MBO
• Studiejaar 1

Bootstrap 4.0

Cards

Vorige les

Tables
Image
Jumbotron
Alerts

Bootstrap

Cards

Bordered box

Opties zoals header, footer, content, kleuren enzovoort

Een goede indeling van cards in een pagina om meer inhoud tegelijk te presenteren.

Zo maak je een basic card

Achtergrondkleuren

.bg-primary

.bg-success

.bg-info

.bg-warning

.bg-danger

.bg-secondary

.bg-dark

.bg-light

Welke klasse hoort hier niet bij?

1. card-header
2. card-main
3. card-body
4. card-footer

Images passend in card

Met card-img-top of card-img-bottom kun je afbeeldingen passend maken binnen de card.

Stretched link

Als je wilt dat het hele kaartje een link vormt gebruik je de class stretched-link.

Card-img-overlay

Deze class gebruik je als je de afbeelding achter de tekst wilt laten zien.

Class card-deck maakt de cards even groot

Class card-group maakt de cards even groot en verwijdert de margins tussen de cards

Wat doet de volgende klasse: stretched-link

Wanneer gebruik je card-img-overlay?

1. Als je de afbeelding op ware grote wilt laten zien.
2. Als je de tekst onder de afbeelding wilt laten zien.
3. Als je de afbeelding achter de tekst wilt laten zien.
4. Als je de afbeelding voor te tekst wilt laten zien.

De klasse ..... maakt de cards even groot en verwijdert de margins tussen de cards

1. group
2. card-group
3. card
4. group-card

Wat doet de card-deck klasse?

Opdrachten

In het lesmateriaal kan je een oefenpagina vinden voor de cards, voeg deze toe aan het project in de Bootstrap repository.

• Voeg vier cards toe aan de oefenpagina en probeer de kleuren uit op de cards. 
  
• Geef de cards een breedte van 250px, margin en padding van 10px.
• Maak in de vier cards een h4-element met class "card-title"
• Geef elke h4 in de card een naam met: Artikel 1, Artikel 2, Artikel 3, Artikel 4
  
• Maak eventueel de tekst wit met class text-white
• Voeg een link toe met class card-link en geef de omschrijving “Lees meer…”
  
• Voeg aan één van de cards de stretched-link toe
  met de class = “btn btn-primary stretched-link” 
• Pas de class "card-img-overlay" toe bij een van de vier cards. Je voegt een div toe met deze class met daarin alles wat op de afbeelding moet komen.

• Doe een git add .
  
• git commit –m “Bootstrap Cards" 
  
• git push
  

Opdracht portfolio

• Voeg cards toe aan een aantal elementen uit de portfolio, zoals projecten, of producten. 
• Zet de cards netjes naast elkaar en voeg aan elke card een passende afbeelding toe.
  
• Laat de cards doorlinken naar een detailpagina van je projecten.
  

Heb je de les begrepen?

😒🙁😐🙂😃

Heb je nog vragen?