How to Have a Progress Bar Move from Right to Left Based on a Negative Value in Twitter Bootstrap

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

I actually figured it out! :) Turned out to be really easy, and indeed the answer was found in the previously linked post;

    <li>Speed<span class="pull-right"><em>@Math.Round(DepthValue, 2) m/min</em></span>
        <div class="progress progress-success">
            <div class="bar" style="width: @Model.SpeedRangePercentage%; display: block; float: right;"></div>
        </div>
    </li>

Adding styles "display: block;" and "float; right" caused the bar to move from right to left.

Having multiple progress bars in Bootstrap with left label pushing to the right

some points you should take care of:

• container class is not recommeded to use with inner elements, it is for the layout, refer to this link: https://getbootstrap.com/docs/4.4/layout/overview/#containers
• ID should be unique, can't be used on multiple elements. Use classes for multi purpose.

my suggestion is to use those css styles to achieve what you need.

.container{
   margin: 10px;
}
.progress-label{
   padding: 0px 10px;
   float: left;
   margin-bottom: 0px;
   top: -4px;
   position: relative;
}

Bootstrap progress bar with the text on the remaining part

What you want to do is give the .progress-bar span elements an absolute position and set them to be located on the right.

Because you'll want your bars themselves to occupy 100% of the available width, you'll want to give your spans a negative right value. I went with -20px in the following example.

Note that you can also remove the padding-left, as it won't apply to absolutely-positioned elements, so is irrelevant. Also note that I've added in a custom container with a slightly smaller width, just for ease of clarity in this snippet. You won't need this yourself :)

.container {  width: 80%;}
.progress {  height: 28px;}
.progress-bar {  background-color: #002C6C;  font-size: 16px;  line-height: 28px;}
span {  position: absolute;  right: -20px;  color: #002C6C;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">  <div class="row">    <div class="col-md-4">      <label>Caldas / Coberturas</label>    </div>    <div class="col-md-8">      <div class="progress">        <div class="progress-bar" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 68%;"><span>68%</span></div>      </div>    </div>  </div>  <div class="row">    <div class="col-md-4">      <label>Pacotes de Variedade</label>    </div>    <div class="col-md-8">      <div class="progress">        <div class="progress-bar" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"><span>20%</span></div>      </div>    </div>  </div>  <div class="row">    <div class="col-md-4">      <label>Sobremesas</label>    </div>    <div class="col-md-8">      <div class="progress">        <div class="progress-bar" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"><span>10%</span></div>      </div>    </div>  </div>  <div class="row">    <div class="col-md-4">      <label>Sorvetes / Gelados</label>    </div>    <div class="col-md-8">      <div class="progress">        <div class="progress-bar" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"><span>20%</span></div>      </div>    </div>  </div>  <a href="#">+25 Subclasses</a></div>

Showing negative values on progress bar in qt

You could use the method setFormat(const QString &format) to generate the text you need.

Example:

ui->progressBar->setValue(5);
ui->progressBar->setInvertedAppearance(true);
ui->progressBar->setFormat(QString("-") + QString("%p"));
ui->progressBar_2->setValue(51);
ui->progressBar_2->setInvertedAppearance(true);
ui->progressBar_3->setValue(5);
ui->progressBar_3->setFormat(QString("-") + QString("%p%")); //with %
ui->progressBar_3->setInvertedAppearance(false);
ui->progressBar_4->setValue(51);
ui->progressBar_4->setInvertedAppearance(false);

The method setInvertedAppearance is also interesting to show the progress inverted.

Bootstrap progress bar with label OVER bar/background to the right

Got it:

<div class="row m-2" style="height: 50px;">
    <div class="col-4 text-white bg-gray h-100 d-flex justify-content-end rounded-2 p-2" title="@Model.Name">
        <b class="font-sans align-self-center mh-100 w-100 overflow-hidden"
           style="text-overflow: ellipsis; white-space: nowrap;">
            @Model.Name
        </b>
    </div>
    <div class="col-8 h-100 progress-label-container">
        <div class="progress h-100">
            <div class="progress-bar"
                 role="progressbar" aria-label="Example with label"
                 aria-valuenow="@valuePercentage" aria-valuemin="0" aria-valuemax="@Model.MaxValue"
                 style="width: @valuePercentage%;">
            </div>
        </div>
        <div class="progress-label">
            <b>@Model.Value @Model.Units</b>
        </div>
    </div>
</div>

.progress-label-container{
  position: relative;
}

.progress-label{
  position: absolute;
  right: 7.5%;
  top: 25%;
}

How to vertically align a progress bar in Twitter Bootstrap?

Bootstrap 2

Note this is a solution for bootstrap 2:

width 100%, height variable:

<br>
<div class="progress vertical">
  <div class="bar bar-success" style="height: 70%;width:100%"></div>
  <div class="bar bar-warning" style="height: 20%;width:100%"></div>
  <div class="bar bar-danger" style="height: 10%;width:100%"></div>
</div>

Bootstrap 3+

I'd like you to refer to the others comments on this page

---

Related Topics