Source

Testo

Documentazione ed esempi per le comuni utilità di testo per controllare l'allineamento, il wrapping, il peso e altro ancora.

Allineamento del testo

Riallinea facilmente il testo ai componenti con le classi di allineamento del testo.

Ambizioni 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. A 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>

Per l'allineamento a sinistra, a destra e al centro, sono disponibili classi reattive che utilizzano gli stessi punti di interruzione della larghezza della finestra del sistema griglia.

Testo allineato a sinistra su tutte le dimensioni della finestra.

Testo allineato al centro su tutte le dimensioni della finestra.

Testo allineato a destra su tutte le dimensioni della finestra.

Testo allineato a sinistra su finestre di dimensioni SM (piccole) o più larghe.

Testo allineato a sinistra su finestre di dimensioni MD (medie) o più larghe.

Testo allineato a sinistra su finestre di dimensioni LG (grande) o più larghe.

Testo allineato a sinistra su finestre di dimensioni XL (extra-large) o più larghe.

<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>

A capo automatico e overflow del testo

Avvolgi il testo con una .text-wrapclasse.

Questo testo dovrebbe andare a capo.

<div class="badge badge-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Impedisci al testo di andare a capo con una .text-nowrapclasse.

Questo testo dovrebbe traboccare dal genitore.

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

Per contenuti più lunghi, puoi aggiungere una .text-truncateclasse per troncare il testo con i puntini di sospensione. Richiede display: inline-blocko display: block.

Praeterea iter est quasdam res quas ex communi.

<!-- 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>

Trasformazione del testo

Trasforma il testo in componenti con classi di capitalizzazione del testo.

Testo minuscolo.

Testo maiuscolo.

testo maiuscolo.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Nota come .text-capitalizecambia solo la prima lettera di ogni parola, lasciando inalterato il caso di tutte le altre lettere.

Peso del carattere e corsivo

Modifica rapidamente il peso (grassetto) del testo o metti in corsivo il testo.

Testo grassetto.

Testo in grassetto (relativo all'elemento padre).

Testo di peso normale.

Testo leggero.

Testo più leggero (rispetto all'elemento padre).

Testo in corsivo.

<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>

Monospazio

Cambia una selezione nella nostra pila di caratteri a spaziatura fissa con .text-monospace.

Questo è nel monospazio

<p class="text-monospace">This is in monospace</p>

Ripristina colore

Reimposta il colore di un testo o di un collegamento con .text-reset, in modo che erediti il colore dal suo genitore.

Testo disattivato con un collegamento di ripristino .

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

Decorazione del testo

Rimuovi una decorazione di testo con una .text-decoration-noneclasse.

Link non sottolineato

<a href="#" class="text-decoration-none">Non-underlined link</a>