ブートストラップのプログレスバーでバーの外にラベルを表示する時の問題
Bootstrap v4.0.0からプログレスバー（進捗バー）が追加されました
概ね良好なのですが、0%の時はバーが表示されないのでそもそも設定したラベルが見えません
そのため表示するラベルをバーの外に設定したのですが、やや上の方に表示されてしまう不具合に遭遇しました
なお公式ページ通りの指定方法でやっても、そもそも公式ページのデモすら表示がおかしいのでBootstrap側のバグだと思われます
このバグの対処方法について紹介します
状況確認と修正方法
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
<span class="ml-1">進捗率：0%</span>
</div>このように、公式サイトに記載されてる通りの方法で実装すると「進捗率：0％」の文字が上の方で見切れてしまいます
修正
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
<span class="ml-2 mt-3">進捗率：0%</span>
</div>このようにラベル部分のマージンを調整することで、真ん中にラベルを持ってくることができます