CODEWITHSUNDEEP
csstwitter-bootstrap
Daniel Bezerra De Menezes
Daniel Bezerra De Menezes

Reputation: 1716

Bootstrap progress bar with the text on the remaining part

I need the value of the percentage to be at the right side at a fixed position, any ideas? i tried having the text inside a span, and setting the span with position relative and padding-left 120%. But as the value of the bar gets higher the text is pushed and disapears.

css

.progress {
                height: 28px;

                .progress-bar {
                    background-color: #002C6C;
                    font-size: 16px;
                    line-height: 28px;
                }

                span {
                    position: relative;
                    padding-left: 120%;
                    color: #002C6C;
                }
            }

html of the bars

<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>

Upvotes: 1

Views: 4159

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

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>

Hope this helps! :)

Upvotes: 3

Related Questions