Définir les couleurs et les bordures à l’aide de Bootstrap

Sur vos pages web dès fois pour mettre en exergue un mot une phrase ou même toute une section, vous serez amenés à différencier leur couleur des autres éléments afin de capter l’attention des visiteurs de votre page web.

Les concepteurs de Bootstrap4 conscients de cette réalité ont intégré dans la bibliothèque des classes contenants des codes des couleurs primordiales que vous pouvez appeler pour styliser le fond d’un bloc ou définir une couleur spécifique pour un texte.

Les couleurs de fond mises à votre disposition par Bootstrap4

Les classes ci-dessous vous permettent juste de définir la couleur de fond d’un élément et non la couleur du contenu texte de l’élément.

.bg-danger : cette classe  applique la couleur rouge au fond de l’élément

Exemple :

<p class="bg-danger p-2">Ceci est un paragraphe de couleur de fond rouge</p>

Résultat :

couleur bootstrap

.bg-warning : cette classe applique la couleur orange au fond de l’élément

Exemple :

<p class="bg-warning p-2">Ceci est un paragraphe de couleur de fond orange</p>

Résultat :

couleur Bootstrap

.bg-success : elle applique la couleur verte au fond de l’élément

Exemple :

<p class="bg-success p-2">Ceci est un paragraphe de couleur de fond verte</p>

Résultat :

couleur Bootstrap

.bg-primary : elle applique la couleur bleu claire au fond de l’élément

Exemple :

<p class="bg-primary p-2">Ceci est un paragraphe de couleur de fond bleu claire</p>

Résultat :

couleur Bootstrap

.bg-info : elle applique une couleur bleu ciel au fond de l’élément

Exemple :

<p class="bg-info p-2">Ceci est un paragraphe de couleur de fond bleu ciel</p>

Résultat :

couleur Bootstrap

.bg-dark : elle applique une couleur noire au fond de l’élément

Exemple :

<p class="bg-dark p-2">Ceci est un paragraphe de couleur de fond noire</p>

Résultat :

couleur Bootstrap

.bg-light : elle applique une couleur grise claire au fond de l’élément

Exemple :  Pour pouvoir bien remarquer le fond gris clair nous allons définir une couleur sombre pour le corps de la page

<p class="bg-light p-2 m-2">Ceci est un paragraphe de couleur de fond grise claire</p>

Résultat :

couleur Bootstrap

.bg-white : elle définit une couleur banche pour le fond de l’élément

Exemple :

<p class="bg-white p-2 m-2">Ceci est un paragraphe de couleur de fond blanche</p>

Résultat :

couleur Bootstrap

Les couleurs mises à votre disposition par Bootstrap4 pour styliser les texte

Les classes permettant de styliser les textes sont presque similaires à celles qui définissent la couleur de fond d’un élément.

Ces classes sont : .text-primary, .text-info, .text-success, .text-danger, .text-warning, .text-secondary, .text-dark, .text-light .

Voici des exemples illustratifs:

<p class="text-primary">Texte de couleur bleu claire</p>
<p class="text-info">Texte de couleur bleu ciel</p>
<p class="text-success">Texte de couleur verte</p>
<p class="text-danger">Texte de couleur rouge</p>
<p class="text-warning">Texte de couleur orange</p>
<p class="text-secondary">Texte de couleur grise foncée</p>
<p class="text-light bg-dark">Texte de couleur grise claire</p>
<p class="text-dark">Texte de couleur noire</p>

Résultat :

couleur Bootstrap pour les textes

Les couleurs pour styliser les liens sur vos page web mises à votre disposition par Bootstrap4

Elles sont identiques aux classes permettant de définir la couleur d’un simple texte.

Exemple :

<p><a href="#" class="text-primary">Lien de couleur bleu claire</a></p>
<p><a href="#" class="text-info">Lien de couleur bleu ciel</a></p>
<p><a href="#" class="text-success">Lien de couleur verte</a></p>
<p><a href="#" class="text-danger">Lien de couleur rouge</a></p>
<p><a href="#" class="text-warning">Lien de couleur orange</a></p>
<p><a href="#" class="text-secondary">Lien de couleur grise foncée</a></p>
<p><a href="#" class="text-light bg-dark">Lien de couleur grise claire</a></p>
<p><a href="#" class="text-dark">Lien de couleur noir</a></p>

Résultat :

couleurs Bootstrap pour les liens

Les bordures

Plus besoin d’écrire des lignes de code CSS pour appliquer une bordure avec une couleur spécifique à un élément, Bootstrap met à notre disposition des classes utilitaires pour ce besoin.

Appliquer une bordure :

Pour appliquer une bordure il faut utiliser la classe .border

Exemple :

<div class="border">
   <p>Nous avons appliqués une bordure au conteneur</p>
</div>

Rendu :

Bordure avec Bootstrap

Spécifier le compartiment auquel vous voulez appliquer la bordure :

Il se peut que vous voulez juste appliquer la bordure à gauche , à droite ou à tout autre partie de l’élément. Nous avons à notre disposition les classes suivantes pour réaliser cela : .border-top, .border-bottom, .border-right, .border-left

.border-top : Applique la bordure au-dessus de l’élément

.border-bottom : Applique la bordure en dessous de l’élément

.border-right : Applique la bordure à droite de l’élément

.border-left : Applique la bordure à gauche de l’élément

Exemple :

<div class="border-top m-1 p-1">
   <p>Nous avons appliqués une bordure au-dessus du conteneur</p>
</div>
<div class="border-bottom m-2 p-1">
   <p>Nous avons appliqués une bordure en dessous du conteneur</p>
</div>
<div class="border-right m-1 p-1">
   <p>Nous avons appliqués une bordure à droite du conteneur</p>
</div>
<div class="border-left m-1 p-1">
   <p>Nous avons appliqués une bordure à gauche du conteneur</p>
</div>

Rendu :

Bordure spécifique à l'aide Bootstrap

Définir la couleur de la bordure :

Nous pouvons définir la couleur de bordure à l’aide des classes suivantes :

.border-danger : Bordure de couleur rouge

.border-warning :Bordure de couleur orange

.border-success : Bordure de couleur verte

.border-primary : Bordure de couleur bleu claire

.border-info : Bordure de couleur bleu ciel

.border-secondary : Bordure de couleur grise foncée

.border-dark : Bordure de couleur noire

.border-light : Bordure de couleur grise claire

.border-white : Bordure de couleur blanche

Exemple :

<div class="border border-danger m-1 p-1">
   <p>Nous avons appliqués une bordure de couleur rouge</p>
</div>
<div class="border border-warning m-1 p-1">
   <p>Nous avons appliqués une bordure de couleur orange</p>
</div>
<div class="border border-success m-1 p-1">
   <p>Nous avons appliqués une bordure de couleur verte</p>
</div>
<div class="border border-dark m-1 p-1">
   <p>Nous avons appliqués une bordure de couleur noire</p>
</div>
<div class="border border-primary m-1 p-1">
   <p>Nous avons appliqués une bordure de couleur bleu claire</p>
</div>
<div class="border border-info m-1 p-1">
   <p>Nous avons appliqués une bordure de couleur bleu ciel</p>
</div>

Rendu :

Bordure avec Couleur à l'aide Bootstrap

Cours précédent                                                                                 Cours suivant

Voir la table des matières

 

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.