텍스트
정렬, 줄 바꿈, 무게 등을 제어하는 일반적인 텍스트 유틸리티에 대한 문서 및 예제.
텍스트 정렬 클래스를 사용하여 텍스트를 구성요소에 쉽게 재정렬합니다.
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. 공공의 의무를 다해야 합니다. no hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</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-nowrap클래스로 줄바꿈되지 않도록 합니다.
<div class="text-nowrap" 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>텍스트 대문자 클래스를 사용하여 구성 요소의 텍스트를 변환합니다.
소문자 텍스트.
대문자 텍스트.
대문자로 된 텍스트.
<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-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>