Is it possible to have a progress bar move from right to left based on a negative value in Twitter Bootstrap?

Question

Before even embarking on this project, I\'d like to know if it\'s at all possible to reverse the progress bar found in the bootstrap framework, so it can display a value going f

Answer 1

In Bootstrap 4 just change the div with class .progress to flex-direction: row-reverse or use the flex-row-reverse helper class (as denoted below):

<div class="progress flex-row-reverse">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Answer 2

You can adjust an actual progress bar element via CSS in a couple different ways.

progress {
  transform: rotate(180deg);
}

or better yet

progress {
  direction: rtl;
}

Answer 3

If I could propose a different option, it's even easier than this. Think about it this way:

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" style="width:40%;"></div>
</div>

The .progress element is a block-level element, so just float or position the .progress-bar however you like inside it. Here is a quick fiddle of this idea for reference.