Ce tutoriel Bootstrap 5 vous explique comment ajouter des ombres portées afin de mettre en valeur les différents éléments HTML. On utilisera pour cela la classe « shadow » de bootstrap.
>> Les classes utilitaires : les dimensions
Bienvenue dans cette vidéo dédiée à la continuation de notre formation sur Bootstrap. Si vous venez de découvrir cette vidéo par hasard, je vous invite à consulter la playlist de la formation Bootstrap afin de suivre les autres vidéos et d’assimiler les bases nécessaires. N’oubliez pas de vous abonner à la chaîne pour être informé des prochaines vidéos de cette formation.
Exploration de la Classe Utilitaire « Shadows »
Aujourd’hui, nous allons explorer la classe utilitaire « Shadows » de Bootstrap, qui permet de gérer les ombres portées sur les éléments. J’ai créé un fichier shadow.html et installé Bootstrap. Commençons par ajouter un contenu de base pour visualiser son rendu dans le navigateur. Nous allons créer une structure typique avec une classe « container », une classe « row », et une classe « col ».
Dans la classe « col », nous insérerons un paragraphe de dix mots. Observons maintenant le rendu dans le navigateur pour comprendre le fonctionnement des ombres portées.
Application des Ombres Portées
Après avoir ajouté un peu d’espace dans notre conteneur, nous allons insérer deux autres colonnes pour expérimenter avec différentes ombres. Dans la première colonne, nous appliquerons la classe « shadow » pour obtenir une ombre par défaut. Nous ajusterons également les marges pour mieux apprécier l’effet des ombres.
Sur la deuxième colonne, nous utiliserons la classe « shadow-sm » pour obtenir une ombre plus fine, et sur la troisième colonne, nous utiliserons la classe « shadow-lg » pour une ombre plus importante.
Conclusion
Comme vous pouvez le constater, Bootstrap offre une manière simple et efficace de gérer les ombres portées sur les éléments de votre page. En utilisant les classes utilitaires fournies, vous pouvez rapidement mettre en évidence certains éléments de votre mise en page, ce qui peut améliorer l’esthétique et la lisibilité de votre site.
Merci d’avoir suivi cette vidéo et n’hésitez pas à rester à l’écoute pour les prochaines vidéos de la formation. À bientôt !
