Bootstrap에서 필수 입력 배치(라벨)

소스 및 실행 결과



헤더로, 이하 ver의 bootstrap를 읽어들입니다.

샘플
<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>

입력 부분은 다음과 같습니다.

샘플
<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로 변경
htps : // 게이 t보오 tst et al p. 코 m / 드 cs / 4.0 / 미g 라치온 / # ぁ 베 ls - an debad s

badge 사양
htps : // 게이 t보오 tst et al p. 코 m / 두 cs / 4.0 / 코 m 포넨 ts / 바 드게 /

좋은 웹페이지 즐겨찾기