ICT4U – Development

Dag 1
Inleiding tot Dev
6 Onderwerpen
Kennismaking: Stel Jezelf Voor
Afspraken
Waarom ICT4U?
The Art of Google-Fu
Kennismaking met Development
Werken als Developer
Intro tot het Web
6 Onderwerpen | 1 Quiz
Wat is nu het Web?
Communicatie over het Web
Website en Webpagina
Webserver
Webtechnologieën
Samenvatting: Intro tot het Web
Quiz: Intro tot het Web
Proeven van HTML
10 Onderwerpen | 1 Quiz
Wat is nu HTML?
Korte Geschiedenis van HTML
Opbouw van een HTML Document
Een Code Editor om HTML te Coderen!
Installatie: Visual Studio Code
Hello World in HTML
Meest Gebruikte HTML Elementen
Publiceer Jouw Website Nu Online!
Opdracht: Proeven van HTML
Samenvatting: Proeven van HTML
Quiz: Proeven van HTML
Proeven van CSS
10 Onderwerpen | 1 Quiz
Wat is nu CSS?
Inline styling vs. CSS bestand
Kleurtjes, Lettertypes en Meer!
Effective CSS
Het Zogenaamde Box Model
Pseudo Klassen
Responsive Design
Mobile-First Design
Opdracht: Proeven van CSS
Samenvatting: Proeven van CSS
Quiz: Proeven van CSS
Dag 2
Proeven van Bootstrap
7 Onderwerpen | 1 Quiz
Wat is een CSS Framework?
Wat is nu Bootstrap?
Aan de slag met Bootstrap
Responsive Design met Bootstrap
Extra Bootstrap Componenten
Opdracht: Proeven van Bootstrap
Samenvatting: Proeven van Bootstrap
Quiz: Proeven van Bootstrap
Dag 3
Proeven van JavaScript
6 Onderwerpen
Programmatielogica zonder Code
Wat is nu JavaScript?
Korte Geschiedenis van JavaScript
Hello World in JavaScript
Syntax van JavaScript
Opdracht: Proeven van JavaScript
Dag 4
Programmeertalen Oriëntering
7 Onderwerpen
Wat is nu een Programmeertaal?
In de kijker: Python
In de kijker: JavaScript
In de kijker: Java
In de kijker: C#
In de kijker: PHP
In de kijker: Extra Programmeertalen
Ga naar vorige Onderwerp
Ga naar volgende Onderwerp

Responsive Design met Bootstrap

ICT4U – Development Proeven van Bootstrap Responsive Design met Bootstrap

Het Grid Systeem van Bootstrap

  • Je gaat met Bootstrap alles in containers, rows en columns plaatsen.
    • Concreet telkens div element met klasse container, row en col
  • Voor meer info over het Grid systeem van Bootstrap kan je naar de Bootstrap – Grid documentatie!

De container

  • Een container in Bootstrap omvat de inhoud van jouw webpagina, en geeft meestal een marge aan beide kanten.
    • Responsieve container
    • Garandeert een goede uitlijning en afstand tussen elementen
  • Concreet is dat dus
    <div class="container">...</div>
  • Er bestaat ook container-fluid voor als je 100% van de schermbreedte wil innemen.
    • Meestal doen we dit enkel voor achtergrondskleuren/achtergrondsfoto’s en beperken we de tekstuele inhoud tot de beperkte breedte van container
    <div class="container">
        <h1>Hello Container</h1>
    </div>

De row

  • In de container zetten we rows, en een row is om een groep van kolommen te maken die we dan responsief kunnen maken.
    • In een row hebben we ruimte voor 12 kolommen van gelijke breedte
    • Je kan dus de kolomgrootte instellen en beslissen hoeveel er naast elkaar getoond worden (zie voorbeeld)
  • Concreet is dat dus
    <div class="row">...</div>
    <div class="container">
        <div class="row">
            <h1>Hello Row</h1>
        </div>
    </div>

De column

  • In een row zetten we kolommen.
  • In de kolommen staat onze concrete inhoud.
  • Concreet is dat dus
    <div class="col">...</div>
  • Je kan de proportionele breedte van een kolom instellen met een getal bv. col-12, col-11, col-7, etc.
  • Concreet is dat dus
    <div class="col-3">...</div>
  • In een row is 12 breed, dus als er geen plaats is voor een kolom springt hij eronder dynamisch.
  • Het is ook mogelijk om voor verschillende schermgroottes een andere proportie in te stellen.
    • Dit doe je door eerst een grootte mee te geven.
    • Bv. col-sm-12, col-md-6, col-lg-4, col-xl-3, etc.
  • Voor meer info over de exacte schermgroottes alsook de verschillende klassenamen kan je naar de Bootstrap – Grid documentatie en de Bootstrap – Breakpoints documentatie!
  • Voor meer info over kolommen kan je naar de Bootstrap – Columns documentatie!
    <div class="container">
        <div class="row">
            <div class="col-6">
                <h1>Hello Column</h1>
            </div>
            <div class="col-6">
                <h1>Hello Another Column</h1>
            </div>
        </div>
    </div>

👩‍💻 Hands-on Demo: Hello Bootstrap Grid

De grid van Bootstrap duurt eventjes om gewoon te geraken. We proberen het meteen uit in een project die we vervolgens als referentie gaan gebruiken om het beter te begrijpen.

  1. Maak en nieuwe projectmap aan genaamd hello-bootstrap-grid.
  2. Open deze map via Visual Studio Code.
  3. Via het projectpaneel, maak hierin een nieuw bestand aan genaamd index.html.
  4. Installeer Bootstrap 5 hier op de manier die je hiervoor gezien hebt.
  5. Maak gebruik van div.container, div.row en div.col (met getal) om te experimenteren met inhoud die zich automatisch houdt aan de meegegeven breedte (zie voorbeeld).

Oplossingen

🕵️‍♂️ Klik hier om de oplossingen te tonen
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello Bootstrap Grid</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>Hello Bootstrap Grid</h1>
                <p>To learn about how Bootstrap's grid works, I'm trying out all the different <code>col-12</code>,
                    <code>col-6</code>, <code>col-4</code>, etc.
                </p>
                <h2>Hello col-12</h2>
                <p>I take up 12 out of 12 possible spaces in a row, so I'm neatly taking up all of the space of this
                    row.
                </p>
                <img src="https://picsum.photos/1800/300" class="img-fluid" alt="" srcset="">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta repudiandae tempore veritatis.
                    Fugiat tempore quibusdam temporibus similique atque exercitationem ipsum quae qui dignissimos,
                    doloribus nobis perspiciatis officia eligendi maiores accusamus quisquam odio voluptate non modi,
                    soluta delectus?</p>
            </div>
            <div class="col-6">
                <h2>Hello col-6</h2>
                <p>I take up 6 out of 12 possible spaces in a row, so I'm neatly taking up half the space of this row.
                </p>
                <img src="https://picsum.photos/800/250" class="img-fluid" alt="" srcset="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos magnam deleniti tempore reiciendis,
                    corporis inventore omnis excepturi, expedita nulla dignissimos minima obcaecati quas praesentium.
                    Iste, nihil enim, dignissimos amet nobis eligendi atque voluptatem tempora velit perferendis
                    molestiae.</p>
            </div>
            <div class="col-6">
                <h2>Hello col-6</h2>
                <p>I take up 6 out of 12 possible spaces in a row, so I'm neatly taking up half the space of this row.
                </p>
                <img src="https://picsum.photos/800/250" class="img-fluid" alt="" srcset="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos magnam deleniti tempore reiciendis,
                    corporis inventore omnis excepturi, expedita nulla dignissimos minima obcaecati quas praesentium.
                    Iste, nihil enim, dignissimos amet nobis eligendi atque voluptatem tempora velit perferendis
                    molestiae.</p>
            </div>
            <div class="col-4">
                <h2>Hello col-4</h2>
                <p>I take up 4 out of 12 possible spaces in a row, so I'm neatly taking up a third of the space of this
                    row.
                </p>
                <img src="https://picsum.photos/800/251" class="img-fluid" alt="" srcset="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos magnam deleniti tempore reiciendis,
                    corporis inventore omnis excepturi, expedita nulla dignissimos minima obcaecati quas praesentium.
                    Iste, nihil enim, dignissimos amet nobis eligendi atque voluptatem tempora velit perferendis
                    molestiae.</p>
            </div>
            <div class="col-4">
                <h2>Hello col-4</h2>
                <p>I take up 4 out of 12 possible spaces in a row, so I'm neatly taking up a third of the space of this
                    row.
                </p>
                <img src="https://picsum.photos/800/251" class="img-fluid" alt="" srcset="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos magnam deleniti tempore reiciendis,
                    corporis inventore omnis excepturi, expedita nulla dignissimos minima obcaecati quas praesentium.
                    Iste, nihil enim, dignissimos amet nobis eligendi atque voluptatem tempora velit perferendis
                    molestiae.</p>
            </div>
            <div class="col-4">
                <h2>Hello col-4</h2>
                <p>I take up 4 out of 12 possible spaces in a row, so I'm neatly taking up a third of the space of this
                    row.
                </p>
                <img src="https://picsum.photos/800/251" class="img-fluid" alt="" srcset="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos magnam deleniti tempore reiciendis,
                    corporis inventore omnis excepturi, expedita nulla dignissimos minima obcaecati quas praesentium.
                    Iste, nihil enim, dignissimos amet nobis eligendi atque voluptatem tempora velit perferendis
                    molestiae.</p>
            </div>
            <div class="col-3">
                <h2>Hello col-3</h2>
                <p>I take up 3 out of 12 possible spaces in a row, so I'm neatly taking up a quarter of the space of
                    this row.
                </p>
                <img src="https://picsum.photos/800/249" class="img-fluid" alt="" srcset="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos magnam deleniti tempore reiciendis,
                    corporis inventore omnis excepturi, expedita nulla dignissimos minima obcaecati quas praesentium.
                    Iste, nihil enim, dignissimos amet nobis eligendi atque voluptatem tempora velit perferendis
                    molestiae.</p>
            </div>
            <div class="col-3">
                <h2>Hello col-3</h2>
                <p>I take up 3 out of 12 possible spaces in a row, so I'm neatly taking up a quarter of the space of
                    this row.
                </p>
                <img src="https://picsum.photos/800/249" class="img-fluid" alt="" srcset="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos magnam deleniti tempore reiciendis,
                    corporis inventore omnis excepturi, expedita nulla dignissimos minima obcaecati quas praesentium.
                    Iste, nihil enim, dignissimos amet nobis eligendi atque voluptatem tempora velit perferendis
                    molestiae.</p>
            </div>
            <div class="col-3">
                <h2>Hello col-3</h2>
                <p>I take up 3 out of 12 possible spaces in a row, so I'm neatly taking up a quarter of the space of
                    this row.
                </p>
                <img src="https://picsum.photos/800/249" class="img-fluid" alt="" srcset="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos magnam deleniti tempore reiciendis,
                    corporis inventore omnis excepturi, expedita nulla dignissimos minima obcaecati quas praesentium.
                    Iste, nihil enim, dignissimos amet nobis eligendi atque voluptatem tempora velit perferendis
                    molestiae.</p>
            </div>
            <div class="col-3">
                <h2>Hello col-3</h2>
                <p>I take up 3 out of 12 possible spaces in a row, so I'm neatly taking up a quarter of the space of
                    this row.
                </p>
                <img src="https://picsum.photos/800/249" class="img-fluid" alt="" srcset="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos magnam deleniti tempore reiciendis,
                    corporis inventore omnis excepturi, expedita nulla dignissimos minima obcaecati quas praesentium.
                    Iste, nihil enim, dignissimos amet nobis eligendi atque voluptatem tempora velit perferendis
                    molestiae.</p>
            </div>
            <div class="col-3">
                <h2>Hello col-3</h2>
                <p>I take up 3 out of 12 possible spaces in a row, so I'm neatly taking up a quarter of the space of
                    this row.
                </p>
                <img src="https://picsum.photos/800/249" class="img-fluid" alt="" srcset="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos magnam deleniti tempore reiciendis,
                    corporis inventore omnis excepturi, expedita nulla dignissimos minima obcaecati quas praesentium.
                    Iste, nihil enim, dignissimos amet nobis eligendi atque voluptatem tempora velit perferendis
                    molestiae.</p>
            </div>
            <div class="col-3">
                <h2>Hello col-3</h2>
                <p>I take up 3 out of 12 possible spaces in a row, so I'm neatly taking up a quarter of the space of
                    this row.
                </p>
                <img src="https://picsum.photos/800/249" class="img-fluid" alt="" srcset="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos magnam deleniti tempore reiciendis,
                    corporis inventore omnis excepturi, expedita nulla dignissimos minima obcaecati quas praesentium.
                    Iste, nihil enim, dignissimos amet nobis eligendi atque voluptatem tempora velit perferendis
                    molestiae.</p>
            </div>
            <div class="col-3">
                <h2>Hello col-3</h2>
                <p>I take up 3 out of 12 possible spaces in a row, so I'm neatly taking up a quarter of the space of
                    this row.
                </p>
                <img src="https://picsum.photos/800/249" class="img-fluid" alt="" srcset="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos magnam deleniti tempore reiciendis,
                    corporis inventore omnis excepturi, expedita nulla dignissimos minima obcaecati quas praesentium.
                    Iste, nihil enim, dignissimos amet nobis eligendi atque voluptatem tempora velit perferendis
                    molestiae.</p>
            </div>
            <div class="col-3">
                <h2>Hello col-3</h2>
                <p>I take up 3 out of 12 possible spaces in a row, so I'm neatly taking up a quarter of the space of
                    this row.
                </p>
                <img src="https://picsum.photos/800/249" class="img-fluid" alt="" srcset="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos magnam deleniti tempore reiciendis,
                    corporis inventore omnis excepturi, expedita nulla dignissimos minima obcaecati quas praesentium.
                    Iste, nihil enim, dignissimos amet nobis eligendi atque voluptatem tempora velit perferendis
                    molestiae.</p>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
</body>

</html>

Responsieve Kolommen

  • Je kan dus ook kolom-breedtes dynamisch laten aanpassen afhankelijk van schermgrootte
  • Een schermgrootte duid je aan met een afkorting (bv. col-sm-6 is voor small, col-md-6 is voor medium, col-lg-6 is voor large, etc.)
  • Zie het voorbeeld voor een live demonstratie
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>Hello Responsive Bootstrap Grid</h1>
                ...
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">
                ...
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">
                ...
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">
                ...
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">
                ...
            </div>
        </div>
    </div>

👩‍💻 Hands-on Demo: Hello Responsive Bootstrap Grid

Het voorbeeld van hier boven gaan we overnemen om de responsive grid van Bootstrap beter te begrijpen.

  1. In jouw hello-bootstrap-grid project, maak een nieuw bestand aan genaamd responsive.html.
  2. Installeer Bootstrap 5 hier op de manier die je hiervoor gezien hebt.
  3. Maak gebruik van div.container, div.row en div.col (met getal) om te experimenteren met inhoud die zich automatisch houdt aan de meegegeven breedte (zie voorbeeld) en die ook automatisch verandert afhankelijk van schermgrootte.
    • Op een kleine scherm neemt het de volledige breedte in.
    • Op een tablet neemt het de helft van de breedte in.
    • Op een laptop neemt het een derde van de breedte in.
    • Om een grotere scherm kan je er 4 naast elkaar zien.

Oplossingen

🕵️‍♂️ Klik hier om de oplossingen te tonen
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello Responsive Bootstrap Grid</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>Hello Responsive Bootstrap Grid</h1>
                <p>To learn about how Bootstrap's responsive grid works, I'm trying out all the different
                    <code>col-sm-12</code>,
                    <code>col-md-6</code>, <code>col-lg-4</code>, etc.
                </p>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">
                <h2>Hello col-sm-12 col-md-6 col-lg-4 col-xl-3</h2>
                <p>When the screen is small I'm col-12, when it's medium I'm col-6, when it's large I'm col-4, when it's
                    extra large im col-3!
                </p>
                <img src="https://picsum.photos/1800/750" class="img-fluid" alt="" srcset="">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta repudiandae tempore veritatis.
                    Fugiat tempore quibusdam temporibus similique atque exercitationem ipsum quae qui dignissimos,
                    doloribus nobis perspiciatis officia eligendi maiores accusamus quisquam odio voluptate non modi,
                    soluta delectus?</p>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">
                <h2>Hello col-sm-12 col-md-6 col-lg-4 col-xl-3</h2>
                <p>When the screen is small I'm col-12, when it's medium I'm col-6, when it's large I'm col-4, when it's
                    extra large im col-3!
                </p>
                <img src="https://picsum.photos/1800/750" class="img-fluid" alt="" srcset="">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta repudiandae tempore veritatis.
                    Fugiat tempore quibusdam temporibus similique atque exercitationem ipsum quae qui dignissimos,
                    doloribus nobis perspiciatis officia eligendi maiores accusamus quisquam odio voluptate non modi,
                    soluta delectus?</p>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">
                <h2>Hello col-sm-12 col-md-6 col-lg-4 col-xl-3</h2>
                <p>When the screen is small I'm col-12, when it's medium I'm col-6, when it's large I'm col-4, when it's
                    extra large im col-3!
                </p>
                <img src="https://picsum.photos/1800/750" class="img-fluid" alt="" srcset="">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta repudiandae tempore veritatis.
                    Fugiat tempore quibusdam temporibus similique atque exercitationem ipsum quae qui dignissimos,
                    doloribus nobis perspiciatis officia eligendi maiores accusamus quisquam odio voluptate non modi,
                    soluta delectus?</p>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">
                <h2>Hello col-sm-12 col-md-6 col-lg-4 col-xl-3</h2>
                <p>When the screen is small I'm col-12, when it's medium I'm col-6, when it's large I'm col-4, when it's
                    extra large im col-3!
                </p>
                <img src="https://picsum.photos/1800/750" class="img-fluid" alt="" srcset="">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta repudiandae tempore veritatis.
                    Fugiat tempore quibusdam temporibus similique atque exercitationem ipsum quae qui dignissimos,
                    doloribus nobis perspiciatis officia eligendi maiores accusamus quisquam odio voluptate non modi,
                    soluta delectus?</p>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
</body>

</html>

👩‍💻 Oefening: Pokémon

We gaan oefenen op wat we geleerd hebben oefenen aan de hand van een leuke Pokémon oefening. We gaan namelijk de eerste 17 Pokémon weergeven op een responsieve manier.

  1. Maak een nieuw projectmap genaamd pokemon en maak gebruik van Bootstrap om een responsieve webpagina met Pokémon te tonen zoals in het voorbeeld.
    • Maak een index.html aan.
    • Installeer Bootstrap 5 zoals reeds getoond.
    • Gebruik Google-Fu om informatie (naam, afbeelding en beschrijving) van de eerste 17 Pokémon bijdehand te hebben.
    • Bouw jouw container, row en kolommen op en gebruik responsieve kolommen zodanig dat we per schermgrootte een andere layout zien.
  2. (Extra) Maak het mooier met eigen geschreven CSS en met out-of-the-box snuifjes van Bootstrap zelf.
Ga naar vorige Onderwerp
Ga terug naar Les
Ga naar volgende Onderwerp