Texto
Documentação e exemplos de utilitários de texto comuns para controlar alinhamento, quebra, peso e muito mais.
Alinhamento de texto
Realinhe facilmente o texto aos componentes com classes de alinhamento de texto.
Algum texto de espaço reservado para demonstrar alinhamento de texto justificado. Você fará o mesmo por mim? É hora de encarar a música Eu não sou mais sua musa. Ouvi dizer que é lindo, seja o juiz e minhas garotas vão votar. Eu posso sentir uma fênix dentro de mim. O céu está com ciúmes do nosso amor, os anjos estão chorando lá de cima. Sim, você me leva para a utopia.
<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>
Para alinhamento à esquerda, à direita e ao centro, estão disponíveis classes responsivas que usam os mesmos pontos de interrupção de largura da janela de visualização que o sistema de grade.
Texto alinhado à esquerda em todos os tamanhos de viewport.
Centralize o texto alinhado em todos os tamanhos de viewport.
Texto alinhado à direita em todos os tamanhos de viewport.
Texto alinhado à esquerda em viewports de tamanho SM (pequeno) ou maior.
Texto alinhado à esquerda em viewports de tamanho MD (médio) ou mais largo.
Texto alinhado à esquerda em viewports de tamanho LG (grande) ou maior.
Texto alinhado à esquerda em viewports de tamanho XL (extra grande) ou mais largo.
<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>
Quebra de texto e estouro
Enrole o texto com uma .text-wrap
classe.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Impedir que o texto seja agrupado com uma .text-nowrap
classe.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Para conteúdo mais longo, você pode adicionar uma .text-truncate
classe para truncar o texto com reticências. Requer display: inline-block
ou 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>
Quebra de palavras
Evite que longas sequências de texto quebrem o layout de seus componentes usando .text-break
para definir word-wrap: break-word
e word-break: break-word
. Usamos word-wrap
em vez do mais comum overflow-wrap
para suporte mais amplo ao navegador e adicionamos o obsoleto word-break: break-word
para evitar problemas com contêineres flexíveis.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
Transformação de texto
Transforme texto em componentes com classes de capitalização de texto.
Texto em minúsculas.
Texto em maiúsculas.
Texto capitulado.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Observe como .text-capitalize
altera apenas a primeira letra de cada palavra, deixando as maiúsculas e minúsculas de quaisquer outras letras inalteradas.
Peso da fonte e itálico
Altere rapidamente o peso (negrito) do texto ou coloque o texto em itálico.
Texto em negrito.
Texto em negrito (relativo ao elemento pai).
Texto de peso normal.
Texto leve.
Texto mais leve (relativo ao elemento pai).
Texto em itálico.
<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>
Monoespaço
Altere uma seleção para nossa pilha de fontes monoespaçadas com .text-monospace
.
Isso é em monoespaço
<p class="text-monospace">This is in monospace</p>
Redefinir cor
Redefina a cor de um texto ou link com .text-reset
, para que ele herde a cor de seu pai.
Texto silenciado com um link de redefinição .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Decoração de texto
Remova uma decoração de texto com uma .text-decoration-none
classe.
<a href="#" class="text-decoration-none">Non-underlined link</a>