Tekst
Dokumentacja i przykłady typowych narzędzi tekstowych do sterowania wyrównaniem, zawijaniem, wagą i nie tylko.
Wyrównanie tekstu
Łatwo wyrównuj tekst do komponentów za pomocą klas wyrównania tekstu.
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. W nos 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>W przypadku wyrównania do lewej, prawej i do środka dostępne są klasy reagujące, które używają tych samych punktów przerwania szerokości rzutni, co system siatki.
Tekst wyrównany do lewej we wszystkich rozmiarach rzutni.
Wyśrodkowany tekst we wszystkich rozmiarach rzutni.
Tekst wyrównany do prawej we wszystkich rozmiarach rzutni.
Tekst wyrównany do lewej na rzutniach o rozmiarze SM (małym) lub szerszym.
Tekst wyrównany do lewej w rzutniach o rozmiarze MD (średnim) lub szerszym.
Tekst wyrównany do lewej w rzutniach o rozmiarze LG (dużym) lub szerszym.
Tekst wyrównany do lewej w rzutniach o rozmiarze XL (bardzo duży) lub szerszym.
<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>Zawijanie i przepełnianie tekstu
Zawijaj tekst .text-wrapklasą.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Zapobiegaj zawijaniu się tekstu z .text-nowrapklasą.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>W przypadku dłuższej zawartości możesz dodać .text-truncateklasę, aby obciąć tekst za pomocą wielokropka. Wymaga display: inline-blocklub 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>Łamanie słów
Zapobiegaj łamaniu układu komponentów przez długie ciągi tekstu, używając .text-breakto set word-wrap: break-wordi word-break: break-word. Używamy word-wrapzamiast bardziej powszechnego overflow-wrapdla szerszej obsługi przeglądarek i dodajemy przestarzałe word-break: break-word, aby uniknąć problemów z kontenerami elastycznymi.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Przekształcenie tekstu
Przekształć tekst w komponenty za pomocą klas pisania wielkimi literami.
Tekst pisany małymi literami.
Tekst pisany wielkimi literami.
Tekst pisany wielkimi literami.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Zwróć uwagę, jak .text-capitalizezmienia się tylko pierwsza litera każdego słowa, pozostawiając wielkość liter bez zmian.
Grubość czcionki i kursywa
Szybko zmień grubość (pogrubienie) tekstu lub użyj kursywy.
Pogrubiony tekst.
Tekst wagi pogrubionej (w stosunku do elementu nadrzędnego).
Tekst o normalnej wadze.
Lekki tekst.
Tekst o mniejszej wadze (w stosunku do elementu nadrzędnego).
Tekst kursywą.
<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>Monoprzestrzeń
Zmień zaznaczenie na nasz stos czcionek o stałej szerokości za pomocą .text-monospace.
To jest w monoprzestrzeni
<p class="text-monospace">This is in monospace</p>Zresetuj kolor
Zresetuj kolor tekstu lub łącza za pomocą .text-reset, aby odziedziczył kolor po swoim rodzicu.
Wyciszony tekst z linkiem do resetowania .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Dekoracja tekstu
Usuń dekorację tekstową z .text-decoration-noneklasą.
<a href="#" class="text-decoration-none">Non-underlined link</a>