Comment changer la couleur des spinners de Bootstrap pour une couleur différente de celle du texte ?

Question

J'ai inclus un spinner Bootstrap-4 (comme décrit ici) dans une page web, mais il semble que seules les couleurs des utilitaires de couleur de texte peuvent être utilisées (primaire, avertissement, succès...), ce qui est assez limité. J'aimerais pouvoir changer le thème de la page web, et donc la couleur du spinner, pour une couleur qui n'est pas celle des utilitaires de couleur de texte. Est-il possible de le faire et comment ?

Answer 1

Il y a une chose que vous pouvez faire,

<div class="spinner-border" role="status" style="color: darkgreen">
  <span class="sr-only">Loading...</span>
</div>

Answer 2

Vous pouvez changer la couleur de spinner bootstrap à l'une de vos couleurs préférées. Il vous suffit de régler le paramètre color du spinner.

.text-red {
  color: red;
}
.text-blue {
  color: blue;
}
.text-orange {
  color: orange;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="spinner-border text-red" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="spinner-border text-blue" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="spinner-border text-orange" role="status">
  <span class="sr-only">Loading...</span>
</div>