Bootstrap - place progress bar value on right side

Question

I want to make the Bootstrap progress bar value placed outside of the progress bar to the right.

I don't see this being possible but right now the only option I see is to set progress class a width of 100% minus the width of the value text.

What would be the best way to handle this?

Answer 1

I would use CSS tables to achieve that

HTML

<div class="progress-custom">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
    </div>
    <div class="progress-value">
        50%
    </div>
</div>

CSS

.progress-custom {
    display: table;
    width: 100%;
    margin-bottom: 20px; /*optionally same as the margin bottom of progress class*/
}

.progress-custom .progress{
    margin-bottom: 0;
    display: table-cell;
    vertical-align: middle;
}

.progress-custom .progress-value{
    display: table-cell;
    vertical-align: middle;
    width: 1%; 
    padding: 0 4px; /*optionally*/
}

You can see it here