Bootstrap is een populair framework voor het werken met html, css en JavaScript. Je kunt er snel professionele websites mee ontwerpen. En dan in het bijzonder zogeheten responsieve websites, die mooi meeschalen met het type apparaat waarop ze bekeken worden. Hoe gaat dat in zijn werk?

Bootstrap is vooral een goede hulp bij het maken van ‘responsive’ of responsieve websites. Responsief houdt in dat de weergave wordt aangepast aan de beschikbare ruimte. Open maar eens een website als die van de NOS in een venster en maak dit venster steeds kleiner. Let op hoe de weergave zich aanpast. Op een klein scherm zal bijvoorbeeld het menu compacter worden en verhuist een kolom van de rechterkant naar onderen. De meeste websites werken al zo en dat is voor een groot deel te danken aan Bootstrap.

We gaan aan de slag met Bootstrap en we gaan handmatig een verse start maken. Maak daarvoor eventueel een nieuw mapje voor je Bootstrap-site aan en open deze map in je favoriete teksteditor. Wij gebruiken de teksteditor Brackets.

Starten met bootstrap

Ga naar getbootstrap.com. Zorg dat rechtsboven de laatste versie is geselecteerd. Zo heb je meteen de juiste bijbehorende documentatie. Klik dan op Get Started. Blader naar onderen, naar Starter template. Klik in dit venster op Copy. Hiermee kopieer je alle html-code naar het klembord. Plak het dan in een nieuw bestand in Brackets en bewaar het als html-bestand, bijvoorbeeld index.html. Open Live Voorbeeld om te zien hoe het eruitziet. Dit wordt ons vertrekpunt. 

De html-code zal weinig verrassingen hebben. Wel is de metatag viewport nieuw. Je weet dat de viewport het zichtbare gedeelte van een pagina is. De aanduiding width=device-width geeft in feite aan dat de browser de breedte van de pagina gelijk moet stellen aan de schermbreedte van het apparaat. Als het ontbreekt, zullen apparaten zelf de weergave aanpassen, wat ze zeker op smartphones verre van optimaal doen.

Stylesheets en scripts

In de head ziet je hoe het stylesheet van Bootstrap wordt geladen. Dit bevat alle vooraf gedefinieerde stijlen die je direct kunt gebruiken. We raden aan om onder dit stylesheet een verwijzing te maken naar een eigen, nu nog leeg stylesheet, waarin je aanpassingen maakt:

<link href="css/custom.css" rel="stylesheet" type="text/css">

Deze stijlen zullen, omdat het stylesheet later is geladen, voorrang hebben boven de standaardstijlen van Bootstrap. Onderaan het html-document zie je hoe de jQuery-bibliotheek en een Bootstrap-bundel worden geladen. Die laatste omvat ook Popper.js, een soort hulpbibliotheek voor JavaScript waarvan veel Bootstrap-componenten gebruikmaken. 

Alle onderdelen worden vanaf een zogenoemd Content Delivery Network (CDN) geladen. Als je zo’n CDN gebruikt, zal altijd automatisch de dichtstbijzijnde server worden gebruikt, zodat iedere bezoeker optimale prestaties heeft. Je mag de scripts natuurlijk ook op je eigen pc (of later je hostingaccount) zetten.

©PXimport

Om te zien welke mogelijkheden je hebt, is het slim om de documentatie erbij te houden. Onder Layout zie je tips voor bijvoorbeeld het werken met grids. Ook het kopje Content verdient je aandacht. Hier lees je over alle mogelijke manieren om met afbeeldingen te werken en om bijvoorbeeld tekst of tabellen op te maken. 

Onder Components vind je uiteenlopende componenten die je kunt opnemen in je pagina. Onder Utilities zie je handige opties die je kunt gebruiken. Zo kun je door een class toe te voegen bijvoorbeeld de tekst- of achtergrondkleur wijzigen, of marges en padding beïnvloeden.

Containers en jumbotrons

We beginnen met wat tips voor de lay-out. Uitgebreide details hierover vind je in de documentatie in het betreffende gedeelte. Als voorbeeld zullen we de kop <h1> in een zogenoemde container zetten:

Omdat we hier container als classnaam gebruiken, wordt de breedte in sprongetjes aan de vensterbreedte aangepast. Dat komt door enkele @media-regels in het stylesheet, waaronder deze twee:

Wat hier wordt bepaald, is dat indien de breedte van het venster minimaal 576 pixels is, de container maximaal 540 pixels groot moet zijn. En als het venster minimaal 768 pixels is, moet de container een maximale breedte van 720 pixels aannemen. 

Gebruik je container-fluid, dan zijn zulke regels er niet en wordt steeds de volledige breedte gebruikt. Deze @media-regels vormen ook de basis voor responsieve websites. Dit soort details kun je achterhalen via het volledige stylesheet van Bootstrap (zie onderstaande alinea’) of via de ontwikkelaarstools, door rechts op een element te klikken en dan Inspecteren te kiezen.

Het is handig om de bronbestanden van Bootstrap bij de hand te hebben. Deze vind je op deze pagina onder Source files. Pak het zip-bestand na het downloaden uit in een map op je pc. Je kunt nu altijd even spieken hoe iets precies wordt aangepakt in bijvoorbeeld het stylesheet van Bootstrap, die in het mapje dist/css staat.

Met een kleine aanpassing van de classnaam maak je een zogenoemde jumbotron, een grote grijze box die de volledige schermbreedte inneemt en vooral is bedoeld om de aandacht op bepaalde content te vestigen.

Als je in de documentatie naar Utilities gaat, zie je onder Colors hoe je met een paar extra classes de kleur van de achtergrond en tekst kunt veranderen, bijvoorbeeld bg-primary om het de standaard (blauwe) achtergrondkleur te geven en text-white voor een witte tekstkleur:

Meer mogelijkheden

Op een vergelijkbare manier kun je bijvoorbeeld mooie buttons of strakkere formulieren maken. De documentatie is een onmisbare hulplijn en gelukkig heel verzorgd. En omdat het framework zo populair is, vind je op internet enorm veel voorbeelden of zelfs kant-en-klare sites die ermee zijn gebouwd. Je hebt de volledige versie van de Bootstrap-bibliotheek en kunt naar vrijheid alle componenten proberen. Ben je wat verder en heb je een goed beeld van wat je wel of niet gaat gebruiken, dan is het slim die bibliotheek wat terug te brengen.

Bootstrap maakt gebruik van Sass, een soort vereenvoudigde taal om css in te schrijven. Je herkent de bestanden aan de .scss-extensie. Zulke bestanden moeten worden omgezet naar css voordat de browser ze kan gebruiken. Daarvoor gebruik je een zogenoemde pre-processor. Het proces wordt ook wel compileren genoemd. Het voordeel van deze benadering is dat je precies kunt aangeven welke componenten van Bootstrap je wel of niet nodig hebt, zodat de uiteindelijke bibliotheek niet groter wordt dan nodig. Ook kun je persoonlijke aanpassingen mee laten nemen, bijvoorbeeld aangepaste standaardkleuren of een andere aanvangsgrootte voor het lettertype.

©PXimport

Werken met grids

Mede dankzij Bootstrap werken veel websites responsief, waarbij met een grid wordt gewerkt om de pagina in vlakken te verdelen. We laten zien hoe je dit toepast. Bij Bootstrap kun je een pagina flexibel verdelen in maximaal twaalf kolommen. Meestal zul je die niet allemaal nodig hebben en zul je ze groeperen om bredere kolommen te maken. Het grid is responsief en de kolommen kunnen zich herschikken, afhankelijk van de schermgrootte. De achterliggende techniek die Bootstrap gebruikt heet Flexbox. Dat kun je samen met CSS Grid gebruiken om complexere lay-outs te maken met alleen css.

Flexbox en CSS Grid zijn bedoeld om samen te gebruiken. Met CSS Grid is elke denkbare lay-out te maken, in een denkbeeldig grid met horizontale en verticale lijnen. Flexbox werkt maar in één richting tegelijk en is daarom eenvoudiger te doorgronden. Je kunt het ook gebruiken binnen een met CSS Grid gedefinieerde rij (horizontaal) of kolom (verticaal). Flexbox lost problemen op die met standaard css uitdagend zijn, zoals een gelijkmatige verdeling van elementen binnen de ruimte of een aantal kolommen met precies dezelfde hoogte, ongeacht de inhoud.

©PXimport

Gelijke kolommen

We vergeten Flexbox even en richten ons op het werken met grids in Bootstrap. Als eerste voorbeeld maken we een lay-out met drie kolommen die in de browser steeds dezelfde breedte moeten krijgen, onafhankelijk van de schermgrootte van het apparaat. We beginnen met een container, waar we vervolgens één rij aan toevoegen met in die rij drie kolommen met col als class:

Verschillende schermgroottes

Stel dat bovenstaande opmaak zich niet leent voor kleinere apparaten, zoals een smartphone, maar eigenlijk alleen voor tablets of groter. Dan zul je een andere class moeten gebruiken dan col. We gaan de weergave richten op alle schermen vanaf een bepaalde breedte. Alle opties zie je in de documentatie van Bootstrap onder Layout / Grid. 

De belangrijkste zijn je col-sm-* voor kleine schermen zoals smartphones, col-md-* voor gemiddelde schermen zoals tablets, col-lg-* voor grotere schermen als een desktop-pc en col-xl-* voor nog grotere schermen. Het sterretje staat voor een bepaald getal, waarbij de som van de kolommen steeds twaalf is. We zullen dat demonstreren.

Lay-outs voor tablets

Om de lay-out op tablets en groter te richten, veranderen we alleen voor elke kolom de class col naar col-md-4. De kolommen staan dan nog steeds netjes naast elkaar vanaf een schermbreedte van 768 pixels, maar op kleinere schermen worden ze onder elkaar gezet. Merk op dat de som van de kolommen (4-4-4) twaalf is. Andere combinaties zijn ook mogelijk, zoals een 3-6-3 opstelling:

Nog meer responsiviteit

We gaan een nog wat flexibelere lay-out maken. Het doel is dat op apparaten met groot scherm (aangegeven door col-lg-*) de kolommen naast elkaar staan, zoals hierboven in 3-6-3-opstelling. Bij een gemiddelde schermbreedte (col-md-*) moeten de eerste twee kolommen in een verhouding van 1:2 naast elkaar staan en moet de derde kolom naar onderen verhuizen. Dat kun je als volgt bereiken:

Zoals je ziet is er een klein beetje rekenwerk nodig. Op apparaten met gemiddeld scherm worden de eerste kolom (col-md-4) en tweede kolom (col-md-8) naast elkaar in een 1:2-verhouding gezet, en omdat de som twaalf is, wordt de derde kolom (col-md-12) automatisch daaronder gezet. Bootstrap geeft je die flexibiliteit. Op grotere schermen wordt de pagina normaal volgens 3-6-3 opgebouwd.

Probeer het in je browser door de vensterbreedte langzaam kleiner of groter te maken. Er zijn meer trucjes, maar de belangrijkste basisprincipes hebben we nu doorgenomen, waarmee je nu verder kunt experimenteren! 

Kom je er niet helemaal uit? Op de website van Bootstrap vind je bij Examples handige voorbeelden van lay-outs die met het framework zijn gemaakt. Je kunt het als inspiratie voor je eigen creaties gebruiken of zelfs voorbeelden een-op-een overnemen, als je dat wilt.

Philips introduceert de Baristina Plus Stainless Steel, een semi-automatische koffiemachine met een roestvrijstalen design en iced coffee-functie. Dit derde apparaat in de Baristina-lijn combineert een robuuste uitstraling met veel gebruiksgemak. Kan er echt niks verkeerd gaan? ID.nl testte het uit.

Ontwerp & specificaties

De Baristina Plus Stainless Steel is een matte, zilverkleurige koffiemachine waarmee je espresso, lungo en cold brew kunt maken van je eigen gewenste soort koffiebonen. In het apparaat zit een grinder die de bonen maalt, de gemalen koffie komt in het portafilter terecht en daarmee zet de Baristina een kop koffie in de gewenste sterkte. De machine is met zijn 5,8 kilo makkelijk te verplaatsen en niet overdreven groot: 35 centimeter hoog, 38 centimeter diep en 15 centimeter breed. De buitenzijde is uitgevoerd in RVS. Smaakvol, maar wel gevoelig voor vingerafdrukken (zoals alle apparaten van roestvrij staal).

©Versuni

Plaats in de Baristina-lijn & techniek

Deze machine is de derde variant in de Baristina-lijn. De eerste, de Baristina, bood in vergelijking met dit apparaat geen ice koffie en was eenvoudiger uitgevoerd. De tweede, de Baristina met Bean swap, bood de gebruikers de keuze om bij elke bak koffie te kiezen tussen twee soorten bonen, of een mix van beide. Dit derde, nieuwe apparaat is een premium-machine die naast een luxe uitstraling de kwaliteit van versgemalen koffie combineert met gebruiksgemak. Als extraatje vergeleken met het instapmodel is er dus de ice coffee-optie. Voor het koffiezetten zet de machine 16 bar pompdruk in voor optimale extractie.

Uitpakken & installatie

De machine zit deugdelijk verpakt in een grote doos met kartonnen bescherming. Er zit geen handleiding bij, alleen een sticker met iconen die aangeven wat er ongeveer moet gebeuren. We vinden dat echt een minpunt; wie nieuw is 'in de koffie' heeft toch wat meer informatie nodig over wat de machine precies kan.

Monteren is een groot woord voor wat je zelf nog moet doen om je eerste kop koffie te zetten. Je pakt het portafilter uit, spoelt het goed om en vult het waterreservoir van 1,2 liter. Dat kan door het reservoir los te halen uit de machine en onder de kraan te vullen. Handiger is het om het klepje bovenaan even open te doen en dan met een kan of maatbeker het water aan te vullen. Bovenin zit een reservoir voor koffiebonen. Ook dit open je met een klepje en vul je tot de rand. Dat is alles!

Bediening & functies

Dit apparaat is duidelijk ontwikkeld voor de koffieliefhebber die houdt van gemak en kwaliteit. De kwaliteit heb je natuurlijk deels zelf in de hand door het type koffiebonen dat je gebruikt. Het gemak uit zich in de bediening van de machine. Aan de bovenzijde zitten verschillende knoppen: een voor espresso, een voor lungo, een voor koffie waar je een ijskoffiedrank mee wilt maken, en een knop voor extra sterke koffie, voor als de standaardinstelling niet voldoende voor je is. Voor de ice coffee wordt de koffie eerst warm gebouwen waarna het doorstroomproces traag verloopt zodat de koffie langzaam afkoelt tijdens het zetten.

De instelling van de molen is niet aanpasbaar, het volume van de koffie in het kopje wel. Hier uit zich het gemis aan een handleiding, deze functie ontdekten we pas toen we op het YouTube-kanaal van Philips wat filmpjes bekeken over de bediening en functies. HIER vind je de betreffende video.

©Versuni

Workflow: van boon tot kop

Je duwt het portafilter in de gleuf links tot deze vastklikt. Dan kies je de gewenste drank, en beweegt (swipet) het portafilter helemaal naar rechts, waar de grinder zit. Het filter zit dan vast en de machine maalt de koffiebonen. Dat maakt uiteraard geluid, vergelijkbaar met andere koffiezetapparaten. Het filter spring terug naar de beginpositie, en de machine zet de gewenste hoeveelheid koffie. Stopt de keuzeknop met knipperen, dan is je 'bakkie' klaar. Het portafilter kun je dan loshalen, ondersteboven boven de vuilnisbak houden en met een druk op de knop de koffiedrab eruit werpen. Dat is alles.

Hier zie je in een Duitstalige video precies hoe dit werkt:

Praktijktest

Koffiemachines moeten natuurlijk getest worden en het liefst door veel verschillende mensen. Ons testexemplaar beleefde de vuurdoop tijdens een drukke verjaardagsvisite, waarbij alle koffiedrinkende bezoekers een kopje Baristina kregen. De vraag was of de machine snel genoeg zou zijn om mensen niet nodeloos lang te laten wachten, en of het geluid van het malen de gesprekken niet zou overstemmen. Voor beide aspecten slaagde de machine met vlag en wimpel. Iedereen was erg te spreken over de smaak van de koffie. Het waterreservoir van 1,2 liter is natuurlijk na enige tijd leeg, dus moet tijdens zulke bijeenkomsten tussentijds wel worden bijgevuld.

Aandachtspunt

Wel dook er een klein aandachtspunt op. Na enige tijd kwam er nogal waterige koffie met een raar kleurtje uit de machine en klonk het malen ook een beetje gek. De koffiebonen bleken op te zijn. Daar komt verder geen signaal of melding van, maar is iets om in de gaten te houden. Het deksel van het koffiebonen-reservoir is semi-transparant, dus normaliter zou je dat wellicht snel zien. Echter, de machine wordt niet geleverd met een handleiding, maar... met een paarse sticker precies op die plek! Als je die er niet afhaalt, zie je dus niet hoe het gesteld is met de voorraad koffiebonen.

Onderhoud & schoonmaak

De machine heeft verder weinig nodig aan energie van de gebruiker. Het lekbakje is afneembaar en kun je periodiek schoonmaken. Als je zorgt voor voldoende water en bonen en het portafilter elke keer leegmaakt na het zetten van een kopje koffie, kun je een tijd vooruit. Overigens: als je vergeet de drab weg te gooien en aan een nieuwe bak koffie wilt beginnen, kun je het portafilter niet naar de grinder bewegen, dan zit 'ie vast. Je kunt dus nooit verse koffie gemaald krijgen over de drab van een eerdere sessie.

©Versuni

Eindoordeel & alternatieven

Deze machine blinkt uit in gebruiksgemak en het robuuste design zal zeker een grote groep koffiedrinkers aanspreken. Het reservoir bevat genoeg water om de dag door te komen, en er kan eigenlijk niets misgaan tijdens het gebruik. De prijs is stevig vergeleken met de eerder uitgebrachte Baristina Bean Swap, die geen optie heeft voor ice koffie, maar wel weer de keuze biedt uit twee soorten koffiebonen. Ben je erg prijsbewust en wil je wel de genoemde functies voor espresso, lungo en ice koffie, maar geef je niks om verse bonen, dan is de L'OR Barista Absolu zeker een optie. Die werkt met cups maar is in functionaliteit identiek. Kies je voor je eigen bonen, stijl en gebruiksgemak, dat is de Baristina Plus Stainless Steel een goede keuze.

☕ Bekijk alle koffieapparaten van Philips op Kieskeurig.nl

Met de huidige energieprijzen letten we allemaal extra op ons stroomverbruik. Zuinig aandoen klinkt logisch, maar is best lastig als je niet weet waar de echte energieslurpers zitten. Soms zitten de kosten in een onverwachte hoek. We zetten vijf apparaten op een rij die meer stroom verbruiken dan je waarschijnlijk denkt.

Altijd doen: energielabel checken of instellingen aanpassen

Als je iets in huis moet vervangen, kijk in de winkel dan altijd eerst naar het energielabel. Dat geeft een duidelijk beeld van het stroomverbruik. Blijf je liever nog even bij je huidige toestel, dan helpt het om zuiniger met de instellingen om te gaan. Denk aan het aanpassen van de standby-stand of het apparaat alleen gebruiken op momenten waarop de stroomprijs lager ligt. Dat levert al snel tientallen euro's voordeel op.

©EPREL

1. Kokendwaterkraan: 133 euro per jaar

Meteen kokend water uit de kraan: wie eenmaal een Quooker heeft, wil niet meer zonder. Maar realiseer je wel dat zo'n kraan het water doorlopend op temperatuur moet houden. En dat zie je terug op je energierekening. Een voorbeeld: een gezin van drie personen gebruikt gemiddeld zo'n 10 liter kokend water per dag via een Quooker. Om dit water te verwarmen, is jaarlijks ongeveer 423 kWh aan energie nodig (bron: ANWB Energie) . Daarnaast kost het op temperatuur houden van het water nog eens 87,5 kWh per jaar. Dit komt neer op een totaal energieverbruik van 511 kWh per jaar. Stel dat je een energiecontract hebt waarbij je gemiddeld 0,26 euro per kWh betaalt, dan kost de kraan je 133 euro per jaar. Je moet dus zelf de afweging maken of je het extra comfort vindt opwegen tegen de extra kosten.

2. Wifi-versterker: 23 euro per jaar

Overal goede wifi in huis: we kunnen niet meer zonder. Zeker wanneer je veel thuis werkt, graag streamt of kids hebt die niet achter hun gameconsole zijn weg te slaan, is een must. Grote kans dus dat je een of meerdere wifi-versterkers of repeaters gebruikt. Omdat die 24/7 hun werk doen, kost dat meer dan je misschien denkt. De gemiddelde wifi-versterker – je hebt ze met verschillende wattages – verbruikt jaarlijks 88 kWh. Dat kost je per jaar dus ongeveer 23 euro per repeater.

3. Televisie: afhankelijk van grootte en schermresolutie

Niet verrassend: het stroomverbruik van een televisie is afhankelijk van het formaat van het scherm. Een 65inch-televisie verbruikt bijvoorbeeld twee keer zo veel stroom als een 43inch-exemplaar met hetzelfde energielabel. Vooral de resolutie van het scherm maakt veel uit voor het verbruik. Grotere beeldschermen hebben een hogere resolutie om een scherp beeld te krijgen, zoals een 4K- of zelfs 8K-resolutie. 8K-televisies verbruiken flink meer energie dan een 4K-televisie die net zo groot is. Bij televisies wordt daarom ook vaak het stroomverbruik apart vermeld voor zowel de SDR- als de HDR-video. In dit geval staat SDR voor Standard Dynamic Range met een resolutie van 1080p en HDR voor 4K-content.

Doordat er hier zo veel variabelen een rol spelen, kunnen we geen richtbedrag berekenen. Met deze gegevens en de uitleg over verbruik uitrekenen in het kader hierboven kun je dit het beste zelf doen.
Lees ook: Dit zijn de 11 best geteste televisies van 2025

4. Extra koelkast - tussen de 30 en 36 euro

Wanneer ze een nieuwe koelkast kopen, zetten veel mensen hun oude koelkast in de schuur of garage. Handig, maar houd er rekening mee dat oude koelkasten wel een stuk minder zuinig zijn dan nieuwe. Stel dat je een simpele, eendeurs oude koelkast als extra koelruimte gaat gebruiken. Grote kans dat zo'n koelkast dan energielabel D, E of zelfs F heeft. Daarvan is het gemiddelde jaarverbruik respectievelijk 113, 130 en 139 kWh. Dat kost je op jaarbasis al snel tussen de 30 en 36 euro op jaarbasis extra.

Het kan dus slimmer zijn om in plaats daarvan één grotere koelkast in de keuken neer te zetten. Neem een energiezuinig model als de Samsung RB38C607AB1: die heeft een koelinhoud van 273 liter en een vriesinhoud van 114. Verbruik op jaarbasis? 108 kWh, dus ongeveer 28 euro. Dat is dus lager dan die simpele, oude eendeurs koelkasten die we hierboven hebben aangehaald!

Weet je niet zeker of je aan één koelkast genoeg hebt? Veel mensen leggen uit gewoonte alles in de koelkast, maar dat is zonde van de ruimte én de energie. Sommige producten horen er zelfs liever niet in: tomaten, komkommers, avocado's en aubergines verliezen door de kou hun smaak. Daarnaast zijn harde groenten zoals pompoen, knolselderij en winterpeen op een koele plek in huis wekenlang houdbaar zonder koeling. En waarom zou je zes flessen frisdrank tegelijk koelen? Er pas een nieuwe fles in zetten wanneer de oude bijna leeg is werkt net zo goed.

Wil je de tweede koelkast toch houden, zet hem dan alleen aan wanneer je hem echt nodig hebt, bijvoorbeeld wanneer je je hele familie hebt uitgenodigd voor het kerstdiner of wanneer je je verjaardag viert.

5. Consoles en gaming-pc's - tussen de 45 en 365 euro

Ben je een fervent gamer of heb je kinderen die dat zijn? Afhankelijk van het apparaat waarmee er gegamed wordt, kunnen de kosten flink oplopen. Gebeurt dat op een Xbox of PlayStation, dan verbruikt deze tussen de 150 en 160 watt per uur. Game je 3 uur per dag, dan zit je per jaar zo aan de 45 euro.

Maar pas écht in de papieren loopt het met een game-pc: het verbruik zo'n machine komt gemiddeld per jaar – inclusief monitor – uit op ongeveer 1.400 kWh. Je hebt het dan, bij een tarief van 0,26 euro/kWh, over zo'n 365 euro. En dat staat gelijk aan het energieverbruik van drie koelkasten. Wil je echt besparen, dan is een gameconsole dus de betere keuze. En door hem echt uit te zetten in plaats van op stand-by wanneer je hem niet gebruikt, ben je nog voordeliger uit.