Ce tutoriel Bootstrap 5 vous explique comment mettre une couleur de fond dans les éléments HTML grâce aux classes utilitaires. Nous verrons également qu’il est possible de diminuer l’opacité de la couleur.
>> Les classes utilitaires : marges internes et externes
Bienvenue dans la suite de notre formation sur Bootstrap ! Dans cette vidéo, nous allons explorer en détail les classes utilitaires de Bootstrap, en mettant un accent particulier sur les couleurs de fond. Si vous venez de rejoindre cette vidéo sans avoir vu le début de la série, je vous encourage vivement à consulter la playlist dans le coin supérieur droit pour suivre la formation depuis le début. Dans ce tutoriel, nous allons apprendre à utiliser différentes classes pour appliquer des couleurs de fond à nos éléments HTML.
Création du Contenu avec les Classes de Couleur de Fond
Commençons par créer un fichier HTML dédié, que nous appellerons « background-color.html », et assurons-nous d’avoir Bootstrap installé. Nous allons créer un élément <div> avec la classe container, et à l’intérieur, nous allons insérer sept paragraphes.
Dans ces paragraphes, nous allons utiliser différentes classes de couleur de fond, toutes commençant par bg pour background-color. Par exemple, nous utiliserons bg-primary, bg-secondary, bg-success, bg-danger, bg-warning, bg-info, et bg-light.
Personnalisation des Couleurs de Texte
En plus des couleurs de fond, nous pouvons également personnaliser les couleurs de texte. Par exemple, pour les couleurs de fond claires comme bg-light, nous pouvons utiliser la classe text-primary pour avoir du texte bleu, offrant un contraste agréable.
Dégradés de Couleur
Une autre possibilité offerte par Bootstrap est la création de dégradés de couleur. Nous pouvons appliquer cette fonctionnalité en utilisant la classe bg-gradient, offrant ainsi une transition douce entre les couleurs.
Contrôle de l’Opacité
Une nouveauté introduite avec la version 5.1 de Bootstrap est la possibilité de contrôler l’opacité des éléments. Nous pouvons utiliser la classe utilitaire bg-opacity suivie du pourcentage d’opacité souhaité. Par exemple, bg-opacity-75 pour 75% d’opacité.
Conclusion
En conclusion, les classes utilitaires de Bootstrap offrent une multitude d’options pour personnaliser les couleurs de fond, les dégradés et l’opacité des éléments. En explorant ces fonctionnalités, vous pourrez créer des designs visuellement attrayants et adaptés à vos besoins. N’oubliez pas de consulter la documentation officielle de Bootstrap pour plus d’informations sur ces fonctionnalités. Restez à l’écoute pour plus de vidéos sur Bootstrap et d’autres sujets connexes !
