Text
Dokumentatioun an Beispiller fir gemeinsam Text Utilities fir Ausrichtung, Wrap, Gewiicht a méi ze kontrolléieren.
Einfach Text op Komponente mat Textausrichtungsklassen ëmsetzen.
Ambition des scripts iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. An 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>
Fir lénks, riets, an Zentrum Ausriichtung, reaktiounsfäeger Klassen sinn disponibel déi selwecht Viewport Breet Breet Punkten wéi de Gitter System benotzen.
Lénks ausgeriicht Text op all Viewport Gréissten.
Centre ausgeriicht Text op all viewport Gréissten.
Recht ausgeriicht Text op all viewport Gréissten.
Lénks ausgeriicht Text op viewports Gréisst SM (kleng) oder méi breet.
Lénksausgeriicht Text op Viewports mat MD (mëttel) oder méi breet.
Lénks ausgeriicht Text op Viewports mat LG (grouss) oder méi breed.
Lénks ausgeriicht Text op Viewports Gréisst XL (extra-grouss) oder méi breet.
<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>
Verhënnert datt den Text mat enger .text-nowrap
Klass ëmklappt.
<div class="text-nowrap" style="width: 8rem;">
This text should overflow the parent.
</div>
Fir méi laang Inhalter kënnt Dir eng .text-truncate
Klass addéieren fir den Text mat enger Ellipsis ze truncéieren. Verlaangt display: inline-block
oder 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>
Transforméiert Text a Komponenten mat Text Kapitaliséierungsklassen.
klengen Text.
Groussen Text.
Kapitaliséiert Text.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Notéiert wéi text-capitalize
nëmmen den éischte Buschtaf vun all Wuert ännert, de Fall vun all anere Buschtawen net beaflosst.
Ännert séier d'Gewiicht (Fettegkeet) vum Text oder kursivéiert Text.
Fett Text.
Normal Gewiicht Text.
Liicht Gewiicht Text.
Kursiv Text.
<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>