Texto

Documentación y ejemplos de utilidades de texto comunes para controlar la alineación, el ajuste, el peso y más.

Alineación del texto

Realinee fácilmente el texto a los componentes con clases de alineación de texto.

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

Para la alineación a la izquierda, a la derecha y al centro, se encuentran disponibles clases receptivas que usan los mismos puntos de corte de ancho de ventana que el sistema de cuadrícula.

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

Ajuste y desbordamiento de texto

Envuelve el texto con una .text-wrap clase.

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

Evita que el texto se ajuste a una .text-nowrap clase.

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

Para contenido más extenso, puede agregar una .text-truncate clase para truncar el texto con puntos suspensivos. Requiere display: inline-block o 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>

Salto de palabra

Evite que largas cadenas de texto rompan el diseño de sus componentes usando .text-break para establecer word-wrap: break-word y word-break: break-word . Usamos en word-wrap lugar del más común overflow-wrap para un mayor soporte del navegador, y agregamos el obsoleto word-break: break-word para evitar problemas con los contenedores flexibles.

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

Transformación de texto

Transforme texto en componentes con clases de mayúsculas de texto.

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

Tenga en cuenta que .text-capitalize solo cambia la primera letra de cada palabra, sin afectar el caso de las demás letras.

Peso de fuente y cursiva

Cambie rápidamente el peso (negrita) del texto o ponga el texto en cursiva.

<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-medium">Medium 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>

Monoespacio

Cambie una selección a nuestra pila de fuentes monoespaciadas con .text-monospace .

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

Restablecer color

Restablece el color de un texto o enlace con .text-reset , para que herede el color de su padre.

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

Decoración de texto

Eliminar una decoración de texto con una .text-decoration-none clase.

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