How to add text next to progress bar bootstrap?

label, progress-bar, twitter-bootstrap

Solution

You can fix this by CSS rules on the H4 label.

JSFiddle demo.

Change HTML to this :

<h4 class="progress-label">Java</h4>

And CSS to that :

.progress-label {
    float: left;
    margin-right: 1em;
}

Problem

Hi I am trying to add some text to a progress bar in bootstrap. The way I want it to look is the follow: Java: x-x-x-x-x-x-x-x-x- C++ : x-x-x-x-x-x-x-x-x- where x-x-x-x-x-x-x-x-x- is the progress bar. I have written some code but I can't seem to get the text inline with the progress bar. Any help would be useful. I am using just bootstrap. ``` <div class="panel panel-default" style="height:500px;overflow:scroll"> <div class ="panel panel-primary"> <div class="panel-heading"> <h4>Programming Proficiency</h4> </div> <div class="panel-body"> <div class="alert alert-info"> <div class="container"> <p><h4>Java</h4><div class="progress col-md-2"></div></p> </div> </div> </div> </div> </div> ```

Original source