Tekst
Dokumentacja i przykłady typowych narzędzi tekstowych do sterowania wyrównaniem, zawijaniem, wagą i nie tylko.
Ł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>Zapobiegaj zawijaniu się tekstu z .text-nowrapklasą.
<div class="text-nowrap" 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>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.
Szybko zmień grubość (pogrubienie) tekstu lub użyj kursywy.
Pogrubiony tekst.
Tekst o normalnej wadze.
Lekki tekst.
Tekst kursywą.
<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>