<div class="container">
     <div class="row">
            <div class="col-md-6 col-md-offset-3">
            <h3 class="text-center">My Skills</h3>
            <br>
		    <!-- Skill Bars -->
                <span>html 5</span>
            <div class="progress skill-bar ">
                <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
                    
                </div>
            </div>
                
           <span>CSS 3</span>     
            <div class="progress skill-bar">
                <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" >
                    
                </div>
            </div>
                <span>Bootstrap</span>
            <div class="progress skill-bar">
                <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">    
                </div>
            </div>    
            
                <span>javascript</span>
            <div class="progress skill-bar">
                <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100">
                </div>
            </div>              
            
                <span>jquery</span>
            <div class="progress skill-bar">
                <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                    
                </div>
            </div>  
               
                <span>php</span>
            <div class="progress skill-bar">
                <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
                
                </div>
            </div>                
                     
                <span>photoshop</span>
            <div class="progress skill-bar">
                <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
                   
                </div>
            </div>                  
	</div>
</div>  
</div>    

/* My Skills */

.progress {
  height: 20px;
    border-radius:20px;

}

.progress .skill .val {
  float: right;
  font-style: normal;
  margin: 0 20px 0 0;
}
span {
  
    display:block;
    position: relative;
    font-size: 13px;
    font-weight: 600;
    text-transform:uppercase;
    color: #888888;
	line-height: 17px;
	margin-bottom:5px;
}
.progress-bar {
  text-align: left;

  border-radius:20px;
  transition-duration: 3s;
}

    // Progress bars
     $(document).ready(function() {
      $('.progress .progress-bar').css("width",
                function() {
                    return $(this).attr("aria-valuenow") + "%";
                }
        )
    });