Is there a way to dynamically change the background color of each section in a bootstrap row based on percentages passed through? For example, if I pass in percentages of 30, 40, 20, and 10, the divs should appear in green, red, yellow, and purple respectively.
The percentages will be changing dynamically. How can this be achieved?
The code required is quite simple
<div class="row">
<div class="twenty"></div>
<div class="forty"></div>
<div class="ten"></div>
<div class="thirty"></div>
</div>
I am using an Angular 2 component to pass the class value.