Défi & Quiz

Tâche : Améliorer la présentation du portfolio avec les classes Bootstrap

Étape 1 : Ajoutez la classe appropriée à l'élément div fourni pour créer un conteneur global.
Étape 2 : Ajoutez la classe appropriée à l'élément div fourni pour créer une rangée dans le conteneur.
Étape 3 : Ajoutez les classes appropriées aux éléments div fournis pour créer des colonnes pour chaque élément du portfolio. Assurez-vous que les colonnes sont réactives et ajustent leur largeur en conséquence. (Veuillez vous rappeler qu'il y a trois éléments div à cette étape.).
Étape 4 : Stylisez les titres des éléments du portfolio en ajoutant les classes appropriées aux éléments h2 donnés. Centrez les titres dans leurs colonnes respectives.
Étape 5 : Rendez les descriptions des éléments du portfolio lisibles et de taille appropriée en ajoutant des classes appropriées aux éléments p fournis. Réglez la taille de la police sur fs-6.

index.html

index.css

Utilisez le système de grille de Bootstrap (container, row, col) pour créer une mise en page réactive pour la vitrine du portfolio. Appliquez les classes de typographie (text-center, h2, fs-6) pour styliser les titres et descriptions des éléments du portfolio de manière appropriée.

index.html

index.css

1. En combien de colonnes le système de grille de Bootstrap divise-t-il la page ?

2. Quelle classe enveloppe et centre le contenu dans un conteneur de largeur fixe ?

3. Quelles classes sont utilisées pour créer un groupe horizontal de colonnes dans le système de grille ?

4. Que représentent les classes `sm`, `md`, `lg` et `xl` ?

5. Quelles classes sont utilisées pour styliser les titres avec différentes tailles ?

6. Quelles classes sont utilisées pour aligner les éléments de texte ?

7. Quelle classe est utilisée pour empiler verticalement les boutons ensemble ?

8. Quelle classe est appliquée aux entrées de case à cocher et de bouton radio dans un conteneur `form-check` pour assurer un style cohérent ?

9. Comment le système de grille de Bootstrap contribue-t-il à l'organisation de la mise en page des formulaires ?

Tout était clair ?

Merci pour vos commentaires !

Section 3. Chapitre 8

Essentiels de Bootstrap pour les Sites Web Modernes