Tutoriel Bootstrap 5 – #4 Couleurs, textes et ombres

Nous entrons dans quelque chose de plus concret aujourd’hui dans ce tutoriel Bootstrap. Nous allons apprendre à gérer toutes les couleurs dans notre Bootstrap, jouer avec notre texte et mettre des ombres.

Ce sont des règles de bases que nous apprenons souvent au début lorsque nous apprenons le CSS.

C’est pourquoi nous abordons ce sujet pas à pas pour vous permettre la première édition des éléments d’un site web avec Bootstrap.

Version vidéo

Tu préfères la version vidéo? Je t’invite à regarder ce tutoriel version vidéo sur la chaîne YouTube Informerick.

Couleurs

Les couleurs dans Bootstrap

Comme vous devez vous en douter, vu que nous allons faire du styliser un site, nous devrons nécessairement parler de couleurs.

Cependant, ne vous en faites pas (ou peut-être), Bootstrap n’offre pas beaucoup de couleurs. Il n’offre que 8 et la possibilité du Dark / Light mode.

Pourquoi ? Pour éviter la complication des éléments et en plus il va nous être possible de le modifier au besoin. 

Alors qu’elles sont les couleurs ?

Nous avons:

• Primary → Bleu
• Secondary → Gris
• Success → Vert
• Danger → Rouge
• Warning → Orange/Jaune
• Info → Bleu aqua
• Light → Blanc
• Dark → Noir

Et dans beaucoup de composants, nous allons avoir la fonctionnalité “dark” et “light” qui va modifier en version foncée ou clair.

Définir une couleur sur un élément

Pour définir une couleur à un élément, cela ne va pas être trop compliqué, en fait dans la majorité du temps, nous allons utiliser une classe “élément-couleur”.

Par exemple, si je souhaiterais mettre la couleur primary sur du texte, je lui ajouterais la classe : 

<p class=”text-primary”> Hello World! </p>

Éléments que nous pouvons mettre de la couleur

Voici une liste d’éléments que nous pouvons modifier, leur couleur ainsi que leur classe associée:

Boutons:
class=“btn btn-(couleur)”

Texte, spinner:
class=“text-(couleur)”

Fond, barre de chargement:
class=“bg-(couleur)”

Fond de texte, badge, cartes:
class=“text-bg-(couleur)”

Tableaux
class=“table-(couleur)”

Alertes
class=“alert-(couleur)”

Liens
class=“link-(couleur)”

* Nous n’avons pas vu ces composants et en temps et lieu, je vous montrerai un à un lorsque nous verrons le composant.

Texte

Titres

Bien sûr que bootstrap va styliser nos titres, il va le faire pour tous les titres possibles de <h1> à <h6>. Cependant, vous devez savoir que nous ne devons pas choisir titre selon son style, mais bien selon sa fonction.

Par exemple, il ne devrait avoir qu’un titre <h1> par page pour identifier la page.

Si je veux un titre qui soit de la même grosseur qu’un h1, comment faire ?

Vous pouvez utiliser la classe du même nom que la balise pour en mettre le style sur un paragraphe pour qu’il en ressemble à celui-ci.

Exemple:

<p class=”h1”>Paragraphe qui a l’air d’un H1</p>
<p class=”h2”>Paragraphe qui a l’air d’un H2</p>
<p class=”h3”>Paragraphe qui a l’air d’un H3</p>

…

Titres de présentation

Dans Bootstrap, nous avons aussi des titres de présentation, on nomme ceux-ci des “display”.

Les displays sont des titres plus gros que les titres, plus minces, plus aguicheur.

Vous pouves utiliser la classe “display-#” et le numéro va de 1 à 6…

Mise en forme

Vous pouvez aussi modifier la mise en forme du texte. Mettre en gras, italique, souligner…

Gras:
class=“fw-bold”
class=“fw-bolder”

Italic
class=“fst-italic”

Souligner
class=“text-decoration-underline”

Barrer
class=“text-decoration-line-through”

Supprimer mise en forme
class=“text-decoration-none”

Grosseur du texte

Pour modifier la grosseur du texte nous pouvons utiliser l’attribut “fs-#” (pour font size)

Vous pouvez mettre le chiffre de 1 à 6.

Alignement du texte

Vous pouvez modifier l’alignement du texte aussi. 

Petit point avant sur comment Bootstrap voit les positions.

Du fait que Bootstrap soit disponible mondialement, il ne va pas utiliser le text-align left, right …

Il va utiliser la notion de START, de END, de TOP et de BOTTOM.

Pourquoi Start et End ?

Si vous changez votre version de Bootstrap en RTL (Right To Left) votre site ne sera pas cassé et pourra être modifié facilement !

Donc voici les éléments que vous pouvez mettre:

Début (gauche)
class=“text-start”

Centre
class=“text-center”

Fin (À droite)
class=“text-end”

Transformation du texte

Finalement, pour le texte, nous avons la transformation du texte. Vous pouvez modifier ce que l’apparence d’un texte sera visualisé:

• Tout en minuscule (lowercase)
• Tout en majuscule (uppercase)
• Première lettre de chaque mot en majuscules (capitalize).

Vous pouvez donc utiliser les classes:

Minuscule:
class=“text-lowercase”

Majuscule:
class=“text-uppercase”

Capitalizer(premières lettres majuscules):
class=“text-capitalize”

Ombres

Finalement, nous avons les ombres. Bootstrap va nous offrir des classes permettant de gérer les ombres, mais celles-ci ne sont pas très avancées.

Nous vous conseillons de faire vos propres classes avec ombres pour avec du CSS.

Voici ce que Bootstrap propose:

Petite ombre:
class=“shadow-sm”

Moyenne Ombre
class=“shadow”

Grand Ombre
class=“shadow-lg”

Aucune Ombre
class=“shadow-none”

FAQ