Text
Dokumentatioun an Beispiller fir gemeinsam Text Utilities fir Ausrichtung, Wrap, Gewiicht a méi ze kontrolléieren.
Text Ausrichtung
Einfach Text op Komponente mat Textausrichtungsklassen ëmsetzen.
E puer Plazhaltertext fir gerechtfäerdegt Textausrichtung ze weisen. Wëlls du datselwecht fir mech maachen? Et ass Zäit d'Musek ze konfrontéieren Ech sinn net méi Är Muse. Héiert et ass schéin, sief de Riichter a meng Meedercher wäerten e Vote maachen. Ech kann e Phoenix an mir fillen. Den Himmel ass jalous op eis Léift, Engele kräischen vun uewen. Jo, Dir bréngt mech an d'Utopie.
<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</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>
Textverpackung an Iwwerfloss
Wrap Text mat enger .text-wrap
Klass.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Verhënnert datt den Text mat enger .text-nowrap
Klass ëmklappt.
<div class="text-nowrap bd-highlight" 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>
Wuert Paus
Verhënnert datt laang Strings vum Text Äre Layout vun Äre Komponenten briechen andeems Dir benotzt .text-break
fir ze setzen word-wrap: break-word
an word-break: break-word
. Mir benotzen word-wrap
amplaz vun der méi heefeg overflow-wrap
fir méi breet Browser-Ënnerstëtzung, a füügt déi ofgeschnidden word-break: break-word
fir Probleemer mat Flexbehälter ze vermeiden.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
Text transforméiert
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.
Schrëft Gewiicht an Kursiv
Ännert séier d'Gewiicht (Fettegkeet) vum Text oder kursivéiert Text.
Fett Text.
Bolder Gewiicht Text (relativ zum Elterendeel).
Normal Gewiicht Text.
Liicht Gewiicht Text.
Liichtgewiicht Text (relativ zum Elterendeel).
Kursiv Text.
<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
Ännert eng Auswiel un eise Monospace Schrëftstack mat .text-monospace
.
Dëst ass am Monospace
<p class="text-monospace">This is in monospace</p>
Faarf zrécksetzen
Zerécksetzen d'Faarf vun engem Text oder Link mat .text-reset
, sou datt et d'Faarf vu sengem Elterendeel ierft.
Muted Text mat engem Reset Link .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Text Dekoratioun
Ewechzehuelen engem Text Dekoratioun mat enger .text-decoration-none
Klass.
<a href="#" class="text-decoration-none">Non-underlined link</a>