How to add text next to progress bar bootstrap?

蹲街弑〆低调 提交于 2021-02-07 12:45:16

问题


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>

回答1:


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


来源:https://stackoverflow.com/questions/21396214/how-to-add-text-next-to-progress-bar-bootstrap

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!