Grille Bootstrap

Bootstrap 5 est déjà inclus dans le Pen.

Requis globaux

• Pour chaque étape, faites un fork du Pen d'origine afin de repartir du début à chaque fois.

• Nommer chacune de ces copies en fonction du nom de l'étape actuelle. Par exemple, pour l'étape 1, nommer votre pen: Bootstrap - Étape 1

• Ajouter dans le HTML les classes Bootstrap nécessaires afin de reproduire la mise en page demandée.

Étapes

1. Étape 1
   Faites en sorte, peu importe la résolution d'écran, de recréer la grille suivante.
   

2. Étape 2
   Recréez l'affichage suivant en respectant le changement de mise en page apparaissant au breakpoint xl


3. Étape 3
   Recréez l'affichage suivant en respectant le changement de mise en page apparaissant au breakpoint xl


4. Étape 4
   Recréez l'affichage suivant en respectant les changements de mise en page apparaissant aux breakpoints md et xl


5. Étape 5
   Recréez l'affichage suivant en respectant les changements de mise en page apparaissant aux breakpoints md et xl.

   À partir de cette étape, vous aurez besoin des options d'alignement des rangées afin de réussir certains exercices.
   

6. Étape 6
   Recréez l'affichage suivant en respectant les changements de mise en page apparaissant aux breakpoints md et xl


7. Étape 7
   Recréez l'affichage suivant en respectant les changements de mise en page apparaissant aux breakpoints md et xl


8. Étape 8
   Recréez l'affichage suivant en respectant le changement de mise en page apparaissant au breakpoint md. Afin de réussir cette mise en page, vous devrez vous aventurer dans la documentation de Bootstrap afin de vous renseigner à propos d'order.
   

9. Étape 9
   Recréez l'affichage suivant en respectant les changements de mise en page apparaissant aux breakpoints md et xl. Afin de réussir cette mise en page, vous devrez vous aventurer dans la documentation de Bootstrap afin de vous renseigner à propos d'offset.