텍스트 정렬
텍스트 정렬 클래스를 사용하여 텍스트를 컴포넌트에 쉽게 재정렬할 수 있습니다. 시작, 끝 및 중앙 정렬의 경우 그리드 시스템과 동일한 뷰포트 너비 중단점을 사용하는 반응형 클래스를 사용할 수 있습니다.
Start aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
End aligned text on all viewport sizes.
Start aligned text on viewports sized SM (small) or wider.
Start aligned text on viewports sized MD (medium) or wider.
Start aligned text on viewports sized LG (large) or wider.
Start aligned text on viewports sized XL (extra-large) or wider.
<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>
<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>텍스트 줄바꿈과 오버플로우
.text-wrap 클래스로 줄바꿈하세요.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Prevent text from wrapping with a .text-nowrap class.
<div class="text-nowrap bg-light border" style="width: 8rem;">
This text should overflow the parent.
</div>단어 기준 줄바꿈
.text-break를 사용하여 word-wrap: break-word 및 word-break: break-word를 설정하여 긴 텍스트 문자열이 컴포넌트의 레이아웃을 깨뜨리는 것을 막을 수 있습니다. 더 광범위한 브라우저 지원을 위해 보다 일반적인 overflow-wrap 대신 word-wrap을 사용하고 flex 컨테이너 문제를 피하기 위해 더 이상 사용되지 않는 word-break: break-word를 추가합니다.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>.text-break가 제거되었습니다.
텍스트 대소문자
텍스트 대소문자 클래스를 사용하여 컴포넌트의 텍스트를 변환하세요.
Lowercased text.
Uppercased text.
CapiTaliZed text.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>.text-capitalize가 각 단어의 첫 글자만 변경하고 다른 글자의 대소문자는 영향을 받지 않는다는 점에 유의하세요.
글꼴 크기
텍스트의 ‘글꼴 크기’를 빠르게 변경하세요. 우리의 제목 클래스 (예: .h1–.h6)는 font-size, font-weight, line-height를 적용하지만 이러한 유틸리티는 font-size만 적용합니다. 이러한 유틸리티의 크기는 HTML의 제목 요소와 일치하므로 숫자가 증가하면 크기가 줄어듭니다.
.fs-1 text
.fs-2 text
.fs-3 text
.fs-4 text
.fs-5 text
.fs-6 text
<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>$font-sizes Sass 맵을 수정하여 사용 가능한 font-size를 사용자 정의하세요.
글꼴 굵기와 기울임체
이 유틸리티를 사용하여 텍스트의 font-weight나 font-style를 빠르게 변경하세요. font-style 유틸리티는 .fst-*로 축약되고 font-weight 유틸리티는 .fw-*로 축약됩니다.
Bold text.
Bolder weight text (relative to the parent element).
Semibold weight text.
Normal weight text.
Light weight text.
Lighter weight text (relative to the parent element).
Italic text.
Text with normal font style
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>행간
.lh-* 유틸리티를 사용하여 행간을 변경하세요.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>고정폭
.font-monospace를 사용하여 선택 영역을 고정폭 글꼴 스택으로 변경하세요.
This is in monospace
<p class="font-monospace">This is in monospace</p>색상 재설정
부모 항목의 색상을 상속하도록 .text-reset로 텍스트나 링크의 색상을 초기화하세요.
Muted text with a reset link.
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>텍스트 꾸미기
텍스트 꾸미기 클래스를 사용하여 컴포넌트의 텍스트를 장식하세요.
This text has a line underneath it.
This text has a line going through it.
This link has its text decoration removed<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>Sass
변수
// stylelint-disable value-keyword-case
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base: var(--#{$prefix}font-sans-serif);
$font-family-code: var(--#{$prefix}font-monospace);
// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root: null;
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
$font-size-sm: $font-size-base * .875;
$font-size-lg: $font-size-base * 1.25;
$font-weight-lighter: lighter;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$font-weight-bolder: bolder;
$font-weight-base: $font-weight-normal;
$line-height-base: 1.5;
$line-height-sm: 1.25;
$line-height-lg: 2;
$h1-font-size: $font-size-base * 2.5;
$h2-font-size: $font-size-base * 2;
$h3-font-size: $font-size-base * 1.75;
$h4-font-size: $font-size-base * 1.5;
$h5-font-size: $font-size-base * 1.25;
$h6-font-size: $font-size-base;
맵
글꼴 크기 유틸리티는 유틸리티 API와 함께 이 맵에서 생성됩니다.
$font-sizes: (
1: $h1-font-size,
2: $h2-font-size,
3: $h3-font-size,
4: $h4-font-size,
5: $h5-font-size,
6: $h6-font-size
);
유틸리티 API
글꼴 및 텍스트 유틸리티는 유틸리티 API의 scss/_utilities.scss에 선언되어 있습니다. 유틸리티 API 사용 방법에 대해 알아보세요
"font-family": (
property: font-family,
class: font,
values: (monospace: var(--#{$prefix}font-monospace))
),
"font-size": (
rfs: true,
property: font-size,
class: fs,
values: $font-sizes
),
"font-style": (
property: font-style,
class: fst,
values: italic normal
),
"font-weight": (
property: font-weight,
class: fw,
values: (
light: $font-weight-light,
lighter: $font-weight-lighter,
normal: $font-weight-normal,
bold: $font-weight-bold,
semibold: $font-weight-semibold,
bolder: $font-weight-bolder
)
),
"line-height": (
property: line-height,
class: lh,
values: (
1: 1,
sm: $line-height-sm,
base: $line-height-base,
lg: $line-height-lg,
)
),
"text-align": (
responsive: true,
property: text-align,
class: text,
values: (
start: left,
end: right,
center: center,
)
),
"text-decoration": (
property: text-decoration,
values: none underline line-through
),
"text-transform": (
property: text-transform,
class: text,
values: lowercase uppercase capitalize
),
"white-space": (
property: white-space,
class: text,
values: (
wrap: normal,
nowrap: nowrap,
)
),
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),