The issue lies in setting the position to absolute, which prevents the width from automatically adjusting to full width.
Consider using the following approach instead:
.progress {margin: 10px;} /* Apply this style to the 'progress' class instead of the body */
<div style="position:absolute; bottom:0px;width: 100%;">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">0%</div>
</div>
</div>
Check out this JSFiddle for reference
var count = 0;
$("#nextStepBtn").click(function () {
count++;
if (count <= 100) {
$(".progress").children().each(function () {
$(this).attr("aria-valuenow", count.toString()).css("width", count.toString() + "%").html(count + '%');
});
}
});
.progress {
margin: 10px;
}
.progress-bottom-container {
position:absolute;
bottom:0px;
width:100%;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button id="nextStepBtn" class="btn btn-default">Next step</button>
<br>
<br>
<div class="progress-bottom-container">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">0%</div>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">0%</div>
</div>