ソースと実行結果
ヘッダーで、以下verのbootstrapを読み込み。
sample
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap-theme.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
入力部分は以下の通り。
sample
<label for="name">お名前 <span class="badge badge-danger">必須</span></label>
実行結果。
経緯
書籍でCSS/Bootstrapの勉強をしていたところ、赤い「必須」がうまく表示されず、ググってみても同じ書き方しか見つからなくて困っていました。
公式のドキュメントを調べたところ、結論としてはBootstrapのver違いでした。
書籍ではBootstrapのverが3.3.7で
"badge badge-danger"のところが"label label-danger"になっていたのですが、どうもBootstrap4.0へのレベルアップ時に、label→badgeへと定義名がRenameされたようです。
labelからbadgeへの変更
https://getbootstrap.com/docs/4.0/migration/#labels-and-badges
badgeの仕様
https://getbootstrap.com/docs/4.0/components/badge/