Chữ
Tài liệu và ví dụ cho các tiện ích văn bản phổ biến để kiểm soát căn chỉnh, bao bọc, trọng lượng và hơn thế nữa.
Dễ dàng sắp xếp lại văn bản cho các thành phần với các lớp căn chỉnh văn bản.
Ambitioni debisse 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 trong 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>Đối với căn chỉnh trái, phải và trung tâm, các lớp đáp ứng có sẵn sử dụng các điểm ngắt độ rộng khung nhìn giống như hệ thống lưới.
Văn bản căn trái trên tất cả các kích thước cửa sổ xem.
Văn bản được căn giữa trên tất cả các kích thước cửa sổ xem.
Văn bản được căn phải trên tất cả các kích thước cửa sổ xem.
Văn bản được căn trái trên các cửa sổ xem có kích thước SM (nhỏ) hoặc rộng hơn.
Văn bản được căn trái trên khung nhìn có kích thước MD (trung bình) hoặc rộng hơn.
Văn bản được căn trái trên các cửa sổ xem có kích thước LG (lớn) hoặc rộng hơn.
Văn bản căn trái trên các cửa sổ xem có kích thước XL (cực lớn) hoặc rộng hơn.
<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>Ngăn văn bản gói bằng một .text-nowraplớp.
<div class="text-nowrap" style="width: 8rem;">
This text should overflow the parent.
</div>Đối với nội dung dài hơn, bạn có thể thêm một .text-truncatelớp để cắt ngắn văn bản bằng dấu chấm lửng. Yêu cầu display: inline-blockhoặc display: 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>Chuyển đổi văn bản trong các thành phần với các lớp viết hoa văn bản.
Chữ viết thường.
Văn bản viết hoa.
Văn bản CapiTaliZed.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Lưu ý cách text-capitalizechỉ thay đổi chữ cái đầu tiên của mỗi từ, để lại trường hợp của bất kỳ chữ cái nào khác không bị ảnh hưởng.
Nhanh chóng thay đổi trọng lượng (độ đậm) của văn bản hoặc in nghiêng văn bản.
Chữ in đậm.
Văn bản trọng lượng bình thường.
Văn bản có trọng lượng nhẹ.
Văn bản in nghiêng.
<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>