How to change Bootstrap spinners' color to other than text color utilities?

user_9277626 0
Viewed 4271

I included a Bootstrap-4 spinner (as described here ) in a web page, but it seems that only the colors from text color utilites can be used (primary,warning, success...), which is quite limited. I would like to be able to change the theme of the webpage, and therefore the color of the spinner too, to a color that is not one of the text color utilites. Is it possible to do that and how?

css-color bootstrap-4 colors css
2 Answers

Well one thing you can do is,

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

You can change the color of bootstrap spinner to any of your favourite color. You just need to set the color property of the 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>

user_24010880
Related