텍스트
정렬, 줄 바꿈, 무게 등을 제어하는 일반적인 텍스트 유틸리티에 대한 문서 및 예제.
텍스트 정렬
텍스트 정렬 클래스를 사용하여 텍스트를 구성요소에 쉽게 재정렬합니다.
양쪽 정렬된 텍스트 정렬을 보여주는 일부 자리 표시자 텍스트. 나에게도 똑같이 해줄래? 이제 내가 더 이상 당신의 뮤즈가 아닌 음악을 마주할 시간입니다. 아름답다고 들었습니다. 판사와 내 딸들이 투표를 할 것입니다. 내 안에 불사조를 느낄 수 있습니다. 하늘은 우리의 사랑을 질투하고 천사들은 위에서 울고 있습니다. 예, 당신은 나를 유토피아로 데려갑니다.
<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>왼쪽, 오른쪽 및 중앙 정렬의 경우 그리드 시스템과 동일한 뷰포트 너비 중단점을 사용하는 반응형 클래스를 사용할 수 있습니다.
모든 뷰포트 크기에서 왼쪽 정렬된 텍스트입니다.
모든 뷰포트 크기에서 가운데 정렬된 텍스트.
모든 뷰포트 크기에서 오른쪽 정렬된 텍스트.
SM(작음) 또는 더 넓은 크기의 뷰포트에서 왼쪽 정렬된 텍스트입니다.
크기가 MD(중간) 이상인 뷰포트의 왼쪽 정렬된 텍스트입니다.
뷰포트 크기가 LG(대형) 이상인 왼쪽 정렬된 텍스트입니다.
XL(초대형) 또는 더 넓은 크기의 뷰포트에서 왼쪽 정렬된 텍스트입니다.
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>텍스트 줄 바꿈 및 오버플로
.text-wrap클래스 로 텍스트를 줄바꿈합니다 .
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>텍스트가 .text-nowrap클래스로 줄바꿈되지 않도록 합니다.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>더 긴 콘텐츠 .text-truncate의 경우 줄임표로 텍스트를 자르는 클래스를 추가할 수 있습니다. 또는 가 필요합니다 .display: inline-blockdisplay: block
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>단어 나누기
.text-breakto set word-wrap: break-word및 를 사용하여 긴 텍스트 문자열이 구성 요소의 레이아웃을 깨뜨리는 것을 방지합니다 word-break: break-word. 더 넓은 브라우저 지원을 위해 word-wrap더 일반적인 대신 사용 하고 플렉스 컨테이너 문제를 피하기 위해 더 이상 사용되지 않는 것을 추가합니다.overflow-wrapword-break: break-word
ㅋㅋㅋㅋㅋㅋㅋㅋ
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>텍스트 변환
텍스트 대문자 클래스를 사용하여 구성 요소의 텍스트를 변환합니다.
소문자 텍스트.
대문자 텍스트.
대문자로 된 텍스트.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>.text-capitalize각 단어의 첫 글자만 변경하고 다른 글자의 대소문자는 영향을 받지 않는 방법에 유의하십시오 .
글꼴 두께 및 기울임꼴
텍스트의 두께(굵기)를 빠르게 변경하거나 텍스트를 기울임꼴로 표시합니다.
굵은 텍스트.
더 굵은 텍스트(상위 요소에 상대적).
일반 무게 텍스트입니다.
가벼운 텍스트.
더 가벼운 무게의 텍스트(상위 요소에 비해).
기울임꼴 텍스트.
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>모노스페이스
를 사용하여 선택 영역을 고정 폭 글꼴 스택으로 변경합니다 .text-monospace.
이것은 모노스페이스에서
<p class="text-monospace">This is in monospace</p>색상 재설정
.text-reset상위 항목에서 색상을 상속하도록 텍스트 또는 링크의 색상을 재설정하십시오 .
재설정 링크 가 있는 음소거된 텍스트
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>텍스트 장식
.text-decoration-none클래스 로 텍스트 장식을 제거하십시오 .
<a href="#" class="text-decoration-none">Non-underlined link</a>