Dit wordt enkel toegepast in het bestand inschrijfformulier.html

Nu kan je profijt halen uit Bootstrap, door in de HTML-bestanden de juiste CSS-klassen van Bootstrap toe te voegen aan de reeds bestaande HTML-tags, of aan nieuwe tags. Voor de volgende opdrachten verwijzen we telkens naar de documentatie van Bootstrap. We geven je soms de zoekwoorden mee die je intikt linksboven in de site van Bootstrap. Op die manier leer je online documentatie raadplegen. Het kan zijn dat je eens wat meer tekst tegenkomt dan je nodig hebt, ook dat hoort bij het leren zoeken. Je mag geen eigen klasse of id toevoegen voor deze opgaven. Je moet alle opgaven uitwerken met de CSS-klassen van Bootstrap. Er zijn enkel aanpassingen nodig in de html-code.!

  1. Gebruik de zoekwoorden shadows om op te zoeken hoe je schaduw kan toevoegen. Pas dit toe op het volledige formulier.
  2. Gebruik het zoekwoord form-grid. In het voorbeeld worden de klassen row en col gebruikt om twee kolommen te maken in het grid-systeem. Pas dit zelf ook toe om in het bovenste deel (persoonlijke gegevens) de inputvelden in minimum twee kolommen te verdelen. (De kolommen zullen automatisch even breed zijn.)
  3. Gebruik het zoekwoord inline en lees hoe dit kan gebruikt worden om Radiobuttons mooi naast elkaar te plaatsen met wat ruimte ertussen. Pas dit toe op de radiobuttons die je toevoegde. Een voorbeeld: radio buttons
  4. Gebruik het zoekwoord button en gebruik button-klassen om de submit en reset knoppen een kleur te geven. Je kan die klassen ook gebruiken als je input gebruikt hebt voor de knoppen. Opmerking: staan de knoppen hierdoor op een totaal andere plaats, controleer dan eerst of de css correct gevalideerd wordt. Is er dan nog steeds een probleem, dan kan je volgende code toevoegen (rond de knoppen):
<div class="d-flex justify-content-center">
      //Twee buttons staan hier
</div>
  1. Gebruik het zoekwoord navs en lees de eerste paragraaf over base navs van deze pagina. Gebruik de klassen nav en nav-link om het navigatiemenu een opmaak te geven.

Ondertussen is jouw CSS-bestand aangepast. Valideer het opnieuw. Staan er fouten die te maken hebben met het Bootstrap-framework? Controleer of je verwijst naar het online-bestand bootstrap.min.css.