Comment créer : les étiquettes

Apprenez à utiliser CSS pour définir le style des étiquettes.

Réussite Info Avertissement Dangereux Autre

Essayer vous-même

Comment définir le style des étiquettes

Première étape - Ajouter HTML :

<span class="label success">Réussite</span>
<span class="label info">Info</span>
<span class="label warning">Avertissement</span>
<span class="label danger">Dangereux</span>
<span class="label other">Autre</span>

Deuxième étape - Ajouter CSS :

.label {
  color: white;
  padding: 8px;
}
.success {background-color: #04AA6D;} /* vert */
.info {background-color: #2196F3;} /* bleu */
.warning {background-color: #ff9800;} /* orange */
.danger {background-color: #f44336;} /* rouge */
.other {background-color: #e7e7e7; color: black;} /* gris */

Essayer vous-même