[basic] BS5 - Color (BS색깔/BS색상) - 글자색 / 배경색

목차

1. Text Color (글자색)
2. Background Color (배경색)

Text Color (글자색)

Text Color (글자색) - 일반 글자색

 

<div class="container mt-3">

  <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 mt-3">

  <p class="text-black-50">50% 투명도 가진 검은색 글씨 (흰색배경일 때)</p>

  <p class="text-white-50 bg-dark">50% 투명도 가진 흰색 글씨 (흰색배경일 때)</p>

</div>

 

결과보기 (PS. 지원숫자: 25, 50, 75, 100)

Background Color (배경색)

 

<div class="container mt-3">

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

 

결과보기