v5.2에 추가됨

색상 및 배경

// Color and background

전경색과 대비되는 배경색을 설정합니다.

개요

색상 및 배경 헬퍼는 .text-* 유틸리티와 .bg-* 유틸리티의 기능을 하나의 클래스에 결합한 것입니다. Sass color-contrast() 함수를 사용하여 특정 background-color에 대해 대비되는 color를 자동으로 결정합니다.

주의! 현재 CSS 네이티브 color-contrast 함수가 지원되지 않기 때문에 Sass를 통해 자체적으로 사용하고 있습니다. 즉, CSS 변수를 통해 테마 색상을 사용자 정의하면 이러한 유틸리티에서 색상 대비 문제가 발생할 수 있습니다.

Primary with contrasting color

Secondary with contrasting color

Success with contrasting color

Danger with contrasting color

Warning with contrasting color

Info with contrasting color

Light with contrasting color

Dark with contrasting color

html

<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

접근성 팁: 색상을 사용하여 의미를 추가하면 시각적 표시만 제공되므로 화면 리더와 같은 보조 기술 사용자에게는 의미가 전달되지 않습니다. 콘텐츠 자체에서 의미가 명확하게 드러나거나(예: 충분한 색상 대비가 있는 가시 텍스트) .visually-hidden 클래스로 숨겨진 추가 텍스트 등 대체 수단을 통해 의미가 포함되었는지 확인하시기 바랍니다.

구성요소 포함

배지에서처럼 .text-*와 .bg-*를 결합한 클래스 대신에 사용합니다:

Primary Info

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

또는 카드에서도 가능합니다:

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>