Created by: davethegr8
These changes address the suggestions outlined in #22702 (closed)
The changes include:
- Setting labels to center vertically: There is no visual difference in the base case, but in cases where the height of the bar is not the default, behaves better.
Before:
After:
- Moving where custom heights are set from
.progress-bar
to.progress
. Again, there is no change in the base case, but on non-default heights it behaves better (more flexible/ maintainable). This is especially useful when using multiple bars.
Before (you have to set them all to be the same height):
<div class="progress">
<div class="progress-bar" style="width: 15%; height: 3rem;">1</div>
<div class="progress-bar bg-success" style="width: 30%; height: 3rem;">2</div>
<div class="progress-bar bg-info" style="width: 20%; height: 3rem;">3</div>
</div>
After (only one change):
<div class="progress" style="height: 3rem;">
<div class="progress-bar bg-warning" style="width: 15%;">1</div>
<div class="progress-bar bg-success" style="width: 30%;">2</div>
<div class="progress-bar bg-info" style="width: 20%;">3</div>
</div>
You can still change the heights to be different if you want, but it's less work in the base case.
<div class="progress" style="height: 3rem;">
<div class="progress-bar bg-success" style="width: 30%;">2</div>
<div class="progress-bar bg-info" style="width: 20%; height: 1rem;">3</div>
</div>