Text Colors

부트스트랩4는 "색상을 통한 의미 부여"를 제공하기 위해 상황별 클래스를 제공합니다.

텍스트 색과 관련한 클래스:

.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-light

<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-light">이 단어는 밝은 회색입니다 (흰 배경위에).</p>
  <p class="text-white">이 단어는 흰색입니다 (흰 배경위에).</p>

** 링크에 사용된 문맥 텍스트 클래스는 마우스를 올렸을 때(hover) 어두움(명암)을 추가하게 됩니다.

<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-light">Light grey link.</a>

효과는 코드를 작성하고 브라우저로 띄워서 마우스를 올려야 확인할 수 있습니다.

배경색 (Background Colors)

부트스트랩4에서 제공하는 배경색 클래스:

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, .bg-light

** 배경색은 텍스트색을 설정하지 않으므로 .text-*클래스와 함께 사용하는 경우가 있습니다.

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