ブートストラップのプログレスバーでバーの外にラベルを表示する時の問題

2020年9月20日Bootstrap

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>

このようにラベル部分のマージンを調整することで、真ん中にラベルを持ってくることができます

エンジニアの年収を上げる方法

フリーランスエンジニアで年収を大幅アップしませんか？
実際に僕は会社員からフリーランスエンジニアになって年収が87万円アップしました

今なら相談（ヒアリング）するだけで3,000円分のamazonギフト券がもらえます！
初めての案件契約で最大10万円分の準備金がもらえます
非公開の高単価案件（100万円超え）が多数あります

詳しくはこちら