Bootstrap: Kleuren

Wanneer we een website bouwen merken we al snel op dat we kleuren op verschillende manieren kunnen gebruiken. We hebben tekstkleuren, achtergrondkleuren, kleuren die wijzigen wanneer je ergens over ‘hovert’.

Bootstrap werkt vanuit de idee dat je een beperkte kleurenset gebruikt voor een professioneel uitziende website. Er zijn bijgevolg kernwoorden ingebouwd die overeenstemmen met bepaalde kleuren: primary is bijvoorbeeld een (zeer herkenbare) blauwtint.

Om een blauwe achtergrond te geven gebruik je de klasse .bg-primary. Om tekst een blauwe kleur te geven kan je in BS dus de klasse toekennen .text-primary. Bemerk wel dat niet alle kleuren in zowel tekst als achtergrond geplaatst kunnen worden (voorbeeld: Inverse en Faded).

We kunnen enkele van deze kleuren visualiseren. Maak een nieuw bestand aan kleuren.html en laad de Bootstrap CSS in. Plaats volgende code binnen het body element om vierkantjes van 30px op 30px te genereren met als achtergrond enkele van deze Bootstrap kleuren.

<style>
      .squarediv {
         width: 30px;
         height: 30px;
 
         border: 1px solid black;
      }
   </style>
 
   <div class="container">
      <h2>Hello Bootstrap</h2>
      <div class="d-flex">
         <div class="bg-primary squarediv"></div>
         <div class="bg-info squarediv"></div>
         <div class="bg-success squarediv"></div>
         <div class="bg-warning squarediv"></div>
         <div class="bg-danger squarediv"></div>
         <div class="bg-light squarediv"></div>
         <div class="bg-dark squarediv"></div>
      </div>
   </div>

Het resultaat is dit:

Bemerk dat we hierbij ook een eigen CSS klasse hebben gebruikt (squarediv) dit is geen enkel probleem, je moet enkel oppassen dat je de BS klassen niet onbewust tegenspreekt of overschrijft. We komen straks nog terug op de klassen .container en .d-flex.