Bootstrap progress label not displayed entirely - css

Question

I have a progress bar with a custom label inside:
<div id="progress" class="progress mb-1" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 5.0%" aria-valuenow="5.0" aria-valuemin="0" aria-valuemax="100">1/20</div>
</div>
It works like a charm. However, the label is not displayed entirely on the left for small screens:
I've tried to get around this in a couple of ways (hardcoding the width of the bar to 2 for 1, playing around with colours) but I wonder if this is a more elegant solution for this?

Answer 1

You can add a second div containing the label, something like this :
<div id="progress" class="progress mb-1">
<div class="progress-label">1/20</div>
<div class="progress-bar" role="progressbar" style="width: 5.0%" aria-valuenow="5.0" aria-valuemin="0" aria-valuemax="100">1/20</div>
</div>
With some style :
.progress {
position: relative;
}
.progress-bar {
overflow: hidden;
z-index: 2;
}
.progress-label {
color: #0275D8;
position: absolute;
left: 0;
height: 100%;
top: 0;
z-index: 1;
}
Preview :

Answer 2

Fixed my issue with the following code:
<div id="progress" class="progress mb-1" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 5.0%; min-width:100px;" aria-valuenow="5.0" aria-valuemin="0" aria-valuemax="100">1/20</div>
</div>