Bootstrap: Grid Oefening: Mijn oplossing

Er kunnen meerdere oplossingen zijn maar hieronder is hoe ik dit resultaat ben bekomen:

<style>
      img {
         width: auto;
         height: 150px;
      }
   </style>
 
<div class="container">
      <h2 class="text-danger text-center">Pokemon</h2>
 
      <div class="row">
         <div class="pokemon col-sm-12 col-md-6 col-lg-4 bg-success">
            <h3>Bulb</h3>
            <img src="img/bulb.jpg" class="mx-auto d-block">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea voluptatem commodi beatae eveniet tempore
               molestias natus provident nam fugit impedit! Quibusdam delectus porro aliquid, earum suscipit vitae
               similique sed dolor.</p>
         </div>
 
         <div class="pokemon col-sm-12 col-md-6 col-lg-4 bg-primary">
            <h3>Squirt</h3>
            <img src="img/squirt.jpg" class="mx-auto d-block">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea voluptatem commodi beatae eveniet tempore
               molestias natus provident nam fugit impedit! Quibusdam delectus porro aliquid, earum suscipit vitae
               similique sed dolor.</p>
         </div>
 
         <div class="pokemon col-sm-12 col-md-6 col-lg-4 bg-warning">
            <h3>Char</h3>
            <img src="img/char.jpg" class="mx-auto d-block">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea voluptatem commodi beatae eveniet tempore
               molestias natus provident nam fugit impedit! Quibusdam delectus porro aliquid, earum suscipit vitae
               similique sed dolor.</p>
         </div>
      </div>
</div>

Cruciaal hierbij is dat je de afbeelding, naam en beschrijving van elke pokemon samen wil zien wanneer deze als blokken op elkaar staan (telefoon, smal scherm). Hierdoor trekken we de conclusie dat ze in eenzelfde kolom horen te staan.

Als we deze in drie aparte rijen hadden gestoken (titels, afbeeldingen, beschrijvingen) dan konden we dit resultaat namelijk niet bekomen op een klein scherm. Dit illustreert ook goed waarom onze voorkeur is om te vertrekken vanuit de layout voor een klein scherm (mobile first) en daarna pas de layout voor grotere schermen toe te voegen…

Uitstekend gedaan!

Deze oefening was niet enkel een oefening of het grid systeem maar ook op kleuren, responsiviteit en het centreren van afbeeldingen.
Als je dit resultaat hebt bekomen dan heb je de idee achter Bootstrap wel goed begrepen.