如何通过Bootstrap将文本侧面的侧面放置

Question

我想要这样的这些文本：

java ---------进度栏--------------

c＃---------进度栏--------------

这是我当前的代码：

<div class="container">
                <p>
                    C#
                </p>
                <div class="progress" id="prog1">
                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                    <span class="sr-only">20% Complete</span>
                    </div>
                </div>
            </div>

Answer 1

<div class="container">
      <p class="col-sm-1">
          C#
      </p>
      <div class="progress col-sm-11" id="prog1">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                <span class="sr-only">20% Complete</span>
            </div>
      </div>
</div>

Answer 2

<div class="container">
  <div class ="row">
    <div class ="col-sm-1">
      <p> C# </p>
    </div>
    <div class="col-sm-11">
      <div class="progress" id="prog1">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
          <span class="sr-only">20% Complete</span>
        </div>
      </div>
    </div>
  </div>
</div>