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.
Căn chỉnh văn bản
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>Gói văn bản và phần tràn
Gói văn bản bằng một .text-wraplớp.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Ngăn văn bản gói bằng một .text-nowraplớp.
<div class="text-nowrap bd-highlight" 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>Ngắt từ
Ngăn các chuỗi văn bản dài phá vỡ bố cục các thành phần của bạn bằng cách sử dụng .text-breakđể thiết lập overflow-wrap: break-word(và word-break: break-wordđể tương thích với IE & Edge).
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Chuyển đổi văn bản
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.
Độ đậm và độ nghiêng của phông chữ
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 đậm hơn (liên quan đến phần tử 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 có trọng lượng nhẹ hơn (liên quan đến phần tử mẹ).
Văn bản in nghiêng.
<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>Monospace
Thay đổi lựa chọn thành ngăn xếp phông chữ monospace của chúng tôi với .text-monospace.
Đây là trong monospace
<p class="text-monospace">This is in monospace</p>Đặt lại màu
Đặt lại màu của văn bản hoặc liên kết với .text-reset, để nó kế thừa màu từ cha của nó.
Đã tắt tiếng văn bản có liên kết đặt lại .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Trang trí văn bản
Loại bỏ một trang trí văn bản với một .text-decoration-nonelớp.
<a href="#" class="text-decoration-none">Non-underlined link</a>