Insert marking in progress bar

Navigation
2

I could not find a way to insert a mark in the bar, I'm trying to show a mean.

As it is:

HowIwouldliketoshowtheaverage:

Does anyone know how I can do this with bootstrap?

    
asked by anonymous 18.07.2014 / 16:11

1 answer

3

A suggested implementation with "Stacked", example:

Demo: JSFiddle 

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 50%">
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 5%">
  </div>
  <div class="progress-bar progress-bar-success" style="width: 45%">
  </div>
</div>

Result:

Anotherwaywouldbetocreateaclassandpositiononprogress-bar,eg:

Demo: JSFiddle

HTML 

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 50%">
  </div>
  <span class="marcador"></span>
</div>

CSS 

.marcador{
    display:inline-block;
    position:relative;
    top:0;
    left:10%;
    width:5px; 
    height:80px; 
    background-color:red;
}

Result:

    
18.07.2014 / 16:23
Storing images in MySQL and dealing with file size Show database image for each usercontrol