Bootstrap listgroup

Bootstrap 4.0

List groups

1 / 18

Slide 1: Slide

ICTMBOStudiejaar 1

This lesson contains 18 slides, with interactive quizzes and text slides.

Lesson duration is: 15 min

Items in this lesson

Bootstrap 4.0

List groups

Slide 1 - Slide

HTML Lists

Slide 2 - Slide

List group

Slide 3 - Slide

List group met een active item

Slide 4 - Slide

List group met een disabled item

Slide 5 - Slide

Horizontale list groups

Slide 6 - Slide

Verschillende kleuren

Slide 7 - Slide

Hoe zorg je ervoor dat een list group horizontaal wordt weergeven?

timer

1:00

Slide 8 - Open question

List group met badges

Slide 9 - Slide

Font Awesome

Basis icons

Zet de onderstaande link in je <head> om fontawesome te kunnen gebruiken

Je hoeft niets te downloaden of te installeren.

Slide 10 - Slide

Font Awesome Voorbeeld

Slide 11 - Slide

List Group with Linked Items

Slide 12 - Slide

Wat is font awesome?

Geweldige lettertypes

Icons die je met een tag kan gebruiken in je HTML

Icons die je moet downloaden voor je website

Geweldige icons

Slide 13 - Quiz

Hoe heet het blauwe gedeelte waar een getal in staat?

timer

1:00

Slide 14 - Open question

Opdrachten

Maak een list group met 10 items, zorg dat ze om en om een andere kleur hebben
Maak een list group met 5 items, zorg dat naast de naam en de prijs (een echt euro teken gebruiken) het plaatje van het item getoond wordt

Doe een git add .
git commit –m "Bootstrap Listgroup"
git push

Slide 15 - Slide

Opdracht portfolio

Bekijk je portfolio en pas de lesstof toe.

Slide 16 - Slide

Heb je de les begrepen?

😒🙁😐🙂😃

Slide 17 - Poll

Zijn er nog vragen?

Slide 18 - Open question

Bootstrap listgroup

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Slide

Slide 4 - Slide

Slide 5 - Slide

Slide 6 - Slide

Slide 7 - Slide

Slide 8 - Open question

Slide 9 - Slide

Slide 10 - Slide

Slide 11 - Slide

Slide 12 - Slide

Slide 13 - Quiz

Slide 14 - Open question

Slide 15 - Slide

Slide 16 - Slide

Slide 17 - Poll

Slide 18 - Open question

More lessons like this

Bootstrap carousel, pagination en breadcrumb

Bootstrap jumbotron en alert

Bootstrap 5 introductie

Bootstrap opstart

Bootstrap nav en navbar

Bootstrap cards

Bootstrap tables en images

Bootstrap Herhaling