Eén van de belangrijkste redenen om Bootstrap te gebruiken, is dat websites tegenwoordig op allerlei devices bekeken worden: van de (hele) grote schermen van een vaste computer tot het minischermpje van een smartphone. Als een website altijd dezelfde statische layout heeft, zullen deze schermen niet optimaal benut worden. Daarom is het goed om websites responsive te maken, dat wil zeggen dat ze zich automatisch aanpassen aan de drager waarop ze gelezen worden. Breek je een website op in verschillende rijen en kolommen, dan kunnen deze delen zo herschikt worden dat ze het aangeboden scherm maximaal benutten. In Bootstrap-terminologie spreken we van een grid system, met dynamisch herschaalbare kolommen.
De inhoud van onze website wordt verpakt in een container, die rijen en kolommen bevat. Dit wordt beperkt tot één rij en één kolom, maar we leggen wel de basis voor het grid system.
Plaats alle inhoud binnen body in een div-tag met class-attribuut “col-md-12”. Plaats dit vervolgens in een div-tag met classattribuut “row”. Plaats ten slotte dit alles binnen een div-tag met class-attribuut “container”. In het voorbeeld hieronder wordt [...] vervangen door jouw code.
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
[...]
</div>
</div>
</div>
</body>
Let op: geef de voorkeur aan het overtikken van deze code. Kopiëren is ook mogelijk, maar heeft twee nadelen: soms loopt het mis bij kopiëren en je mist een extra kans op inoefenen. Bekijk jouw website. Je zou moeten zien dat er links en rechts wat meer witruimte is bijgekomen, toch als jouw website op een groot scherm bekeken wordt.
Controleer ook de footer helemaal onderaan de pagina: is die nog zoals gewenst? Zo niet, ga dan kijken in jouw eigen CSS-bestand en controleer of de code nog geldig is, na de aanpassingen die je zonet in inschrijfformulier.html gedaan hebt. Probeer zelf te verklaren waarom en pas de CSS-selector aan.