Le petit prince

Le but de cet exercice est de mettre en pratique l'usage des classes Bootstrap display (l'utilitaire d'affichage qui commence par .d-*) dans un contexte responsive.

Important

Ne pas ajouter de nouveau HTML. Modifier uniquement les attributs class="" déjà présents dans le code.

Résultat attendu

Version Desktop (≥ md)

Version Mobile (< md)

Instructions

• Effectuez un fork du CodePen de départ
• Analysez attentivement le code HTML et sa structure

• Desktop (breakpoint md et plus) :

  • Masquez le texte débutant par « Antoine de Saint-Exupéry ».

  • Appliquez la classe col-auto à la colonne de l’image et col à la colonne du texte.

    Nouveauté !

    col-auto dicte à la colonne d'avoir une largeur égale à la largeur de son contenu.

  • Assurez-vous que le style du texte corresponde au style d'une balise <h3>.
  • Alignez verticalement le texte par rapport à l'image avec les classes Flexbox de Bootstrap.

• Mobile (plus petit que le breakpoint md) :
  • Masquez la rangée (row) comportant les deux colonnes.
  • Affichez le texte débutant par « Antoine de Saint-Exupéry ».