목차
- Text Color (글자색) - 일반 글자색
- Text Color (글자색) - 링크 글자색
- Text Color (글자색) - 투명도 반영 글자색
- Background Color (배경색)
Text Color (글자색)
Text Color (글자색) - 일반 글자색
<div class="container">
<p class="text-muted">연회색 (묵음・음소거 의미)</p>
<p class="text-primary">연파랑 (중요 의미)</p>
<p class="text-success">연녹색 (성공 의미)</p>
<p class="text-info">연연파랑 (정보 의미)</p>
<p class="text-warning">연주황 (경고 의미)</p>
<p class="text-danger">연빨강 (위험 의미)</p>
<p class="text-secondary">연회색 (덜 중요 의미)</p>
<p class="text-dark">진회색</p>
<p class="text-body">연검정 (기본 body 글자색)</p>
<p class="text-light">연연회색 (흰색배경일 때).</p>
<p class="text-white">흰색 (흰색배경일 때).</p>
</div>
결과보기
Text Color (글자색) - 링크 글자색
<div class="container">
<a href="#" class="text-muted">Muted link.</a>
<a href="#" class="text-primary">Primary link.</a>
<a href="#" class="text-success">Success link.</a>
<a href="#" class="text-info">Info link.</a>
<a href="#" class="text-warning">Warning link.</a>
<a href="#" class="text-danger">Danger link.</a>
<a href="#" class="text-secondary">Secondary link.</a>
<a href="#" class="text-dark">Dark grey link.</a>
<a href="#" class="text-body">Body/black link.</a>
<a href="#" class="text-light">Light grey link.</a>
</div>
결과보기
Text Color (글자색) - 투명도 반영 글자색
<div class="container">
<p class="text-black-50">50% 투명도 가진 검은색 글씨 (흰색배경일 때)</p>
<p class="text-white-50 bg-dark">50% 투명도 가진 흰색 글씨 (흰색배경일 때)</p>
</div>
Background Color (배경색)
<div class="container">
<p class="bg-primary text-white">파란색 (중요)</p>
<p class="bg-success text-white">녹색 (성공)</p>
<p class="bg-info text-white">파랑 (정보)</p>
<p class="bg-warning text-white">주황 (경고)</p>
<p class="bg-danger text-white">빨강 (위험)</p>
<p class="bg-secondary text-white">회색 (덜 중요)</p>
<p class="bg-dark text-white">진회색</p>
<p class="bg-light text-dark">연회색</p>
</div>
결과보기