Quem está migrando de Bootstrap 4 para 5 ou começou um projeto novo se depara com a mesma surpresa: a classe .text-justify, que sempre justificou texto com um único click, simplesmente não existe mais. Foi removida do Bootstrap 5 pela equipe do framework, e quem procurar a classe na documentação oficial de utilitários de texto do Bootstrap 5 não vai encontrar.
A boa notícia é que justificar texto continua possível e fácil. Só que agora exige uma linha de CSS personalizado em vez da classe pronta. Este artigo mostra os três caminhos atualizados, a comparação entre versões e por que essa mudança aconteceu.
A classe .text-justify do Bootstrap 3 e 4
Nas versões 3 e 4, justificar texto era uma das tarefas mais simples do Bootstrap:
<p class="text-justify">
Este texto fica justificado automaticamente, sem precisar de CSS extra.
</p>
A classe .text-justify aplicava text-align: justify no elemento, sem nenhuma configuração adicional. Funcionou exatamente assim nas versões 3.x e 4.x do framework.
Se você herdou um projeto antigo com Bootstrap 4 e está vendo essa classe no código, ela ainda funciona. O problema aparece só quando o projeto for atualizado para a versão 5.
Por que a .text-justify foi removida no Bootstrap 5
A equipe do Bootstrap documentou a decisão no histórico de mudanças da versão 5. Os motivos principais foram três:
1. Problemas de legibilidade. O texto justificado cria espaços irregulares entre as palavras. Em telas estreitas ou linhas curtas, esses espaços viram “rios de espaço” no meio do parágrafo, dificultando a leitura.
2. Baixo uso pela comunidade. A análise de uso do Bootstrap mostrou que poucos projetos efetivamente usavam a classe, especialmente em sites profissionais e responsivos.
3. Padrão de acessibilidade. A recomendação WCAG 1.4.8 do W3C sugere alinhamento à esquerda para usuários com dificuldades cognitivas e dislexia. Manter uma classe utilitária de justificação ia contra esse padrão.
A decisão técnica foi: se você precisa justificar texto, justifique conscientemente com CSS personalizado, sabendo o que está fazendo.
Como justificar texto no Bootstrap 5: os 3 caminhos
Caminho 1: CSS personalizado (recomendado)
A forma mais limpa é recriar a classe no seu próprio CSS:
.text-justify {
text-align: justify;
}
E aplicar no HTML normalmente:
<p class="text-justify">
Este texto será justificado.
</p>
A vantagem é poder estender com hifenização e media queries em um único lugar:
.text-justify {
text-align: justify;
hyphens: auto;
}
@media (max-width: 768px) {
.text-justify {
text-align: left;
}
}
Isso justifica em telas grandes e alinha à esquerda em mobile, evitando o problema dos rios de espaço.
Caminho 2: Estilo inline (rápido, mas evite em produção)
<p style="text-align: justify;">
Texto justificado com estilo inline.
</p>
Funciona em qualquer versão do Bootstrap e em qualquer projeto sem CSS adicional. A desvantagem é misturar HTML com CSS, o que dificulta manutenção. Use só em casos pontuais ou testes.
Caminho 3: Sass customizado (para projetos profissionais)
Se você usa o Bootstrap via Sass, dá para criar uma utility class oficial dentro do projeto. No seu arquivo Sass principal, depois de importar o Bootstrap:
@import "bootstrap/scss/bootstrap";
$utilities: map-merge(
$utilities,
(
"text-align": (
property: text-align,
class: text,
values: (
start: left,
center: center,
end: right,
justify: justify
)
)
)
);
Isso adiciona .text-justify de volta às utilities oficiais do Bootstrap, com todas as variantes responsivas (text-md-justify, text-lg-justify, etc).
Classes de alinhamento disponíveis no Bootstrap 5
O Bootstrap 5 manteve as classes de alinhamento básicas, só removeu a justificação:
| Classe | Equivalência CSS |
|---|---|
text-start | text-align: left (em LTR) |
text-center | text-align: center |
text-end | text-align: right (em LTR) |
Note que o Bootstrap 5 substituiu .text-left e .text-right (que existiam na v4) por .text-start e .text-end. A motivação foi suporte a idiomas RTL (árabe, hebraico), onde “start” e “end” se invertem.
Classes responsivas: alinhamento por breakpoint
O Bootstrap 5 oferece variantes responsivas das classes de alinhamento, aplicadas pelo padrão text-{breakpoint}-{alignment}:
| Breakpoint | Largura mínima | Exemplos |
|---|---|---|
| sm | 576px | text-sm-start, text-sm-center, text-sm-end |
| md | 768px | text-md-start, text-md-center, text-md-end |
| lg | 992px | text-lg-start, text-lg-center, text-lg-end |
| xl | 1200px | text-xl-start, text-xl-center, text-xl-end |
| xxl | 1400px | text-xxl-start, text-xxl-center, text-xxl-end |
Isso permite alinhar diferente em cada tamanho de tela. Por exemplo, centralizar no mobile e justificar no desktop combinando classes utility com CSS personalizado:
<p class="text-center text-md-justify">
Centralizado no mobile, justificado em telas médias para cima.
</p>
Para o text-md-justify funcionar, é preciso adicionar via CSS personalizado, já que o Bootstrap não traz por padrão.
Comparação entre Bootstrap 3, 4 e 5
| Versão | Classe .text-justify | Classe .text-left / .text-right |
|---|---|---|
| Bootstrap 3 | Sim | Sim |
| Bootstrap 4 | Sim | Sim |
| Bootstrap 5 | Removida | Substituída por .text-start / .text-end |
Quem está migrando de v4 para v5 precisa checar e atualizar essas três classes no HTML do projeto.
Atualizando do Bootstrap 4 para 5: o que mexer
O guia oficial de migração do Bootstrap lista todas as classes removidas e renomeadas. Se você está migrando um projeto, busque no código pelos seguintes padrões e substitua:
| Bootstrap 4 | Bootstrap 5 |
|---|---|
text-justify | Criar .text-justify no CSS ou trocar para text-start |
text-left | text-start |
text-right | text-end |
text-sm-left | text-sm-start |
text-md-left | text-md-start |
Um find/replace global em todo o HTML do projeto resolve a maior parte do trabalho. Depois, decidir caso a caso onde a justificação realmente faz sentido.
Cuidados ao justificar texto no Bootstrap responsivo
Justificar texto e responsividade não combinam por padrão. Em telas pequenas, justificar piora a leitura porque cria espaços irregulares mais visíveis. A combinação recomendada é:
.texto-justificado {
text-align: justify;
hyphens: auto;
}
@media (max-width: 768px) {
.texto-justificado {
text-align: left;
}
}
A propriedade hyphens: auto precisa do atributo lang no HTML para funcionar:
<html lang="pt-BR">
Sem o lang, o navegador não sabe quais regras de hifenização aplicar.
Para a teoria completa de justificação em CSS, com todas as nuances (incluindo text-justify para controle fino), veja como deixar o texto justificado no CSS. Se você ainda precisa configurar o Bootstrap no seu ambiente de desenvolvimento, há também como instalar o Bootstrap no Visual Studio Code.
O que esta página entrega que os concorrentes não entregam
A maioria do top SERP para “justificar texto Bootstrap” tem conteúdo desatualizado ou incompleto:
- Sites antigos: ainda recomendam a classe
.text-justifycomo se fosse atual - Documentação oficial Bootstrap: não dá soluções práticas para quem precisa justificar
- Tutoriais em espanhol: cobertura genérica do tema
- W3Schools: não menciona a remoção da classe no Bootstrap 5
Esta página entrega o que falta nos demais:
- Confirmação clara de que
.text-justifyfoi removida no Bootstrap 5 - 3 caminhos atualizados para justificar (CSS, inline, Sass custom)
- Tabela de equivalências para migração v4 → v5
- Lista completa de classes responsivas com breakpoints
- Combinação prática de justificação + responsividade
- Caso de uso real: justificar em desktop e alinhar à esquerda em mobile
Perguntas frequentes
A classe .text-justify foi removida em qual versão do Bootstrap?
Foi removida no Bootstrap 5. Nas versões 3 e 4, ela existia como utility class oficial. Quem está em Bootstrap 4 ainda pode usar normalmente, mas projetos novos no Bootstrap 5 precisam criar a classe via CSS personalizado.
Como justificar texto no Bootstrap 5?
Criando uma classe CSS própria com text-align: justify e aplicando no HTML, ou usando estilo inline. A recomendação é criar a classe no arquivo CSS personalizado para reutilizar em vários parágrafos sem repetir código.
Bootstrap 5 tem classe responsiva para justificar?
Não por padrão. Só existem classes responsivas para text-start, text-center e text-end. Para criar variantes responsivas de justificação, é necessário usar Sass customizado ou adicionar regras CSS específicas por media query.
Por que o texto não fica justificado no mobile mesmo aplicando a classe?
Provavelmente porque há uma regra CSS posterior sobrescrevendo, ou porque o tema do projeto já remove a justificação em telas pequenas. Inspecione o elemento com F12 e veja qual regra está vencendo. Para forçar, use !important ou aumente a especificidade do seletor.
A classe .text-justify ainda funciona no Bootstrap 4?
Sim. Bootstrap 4 ainda tem a classe ativa, e ela funciona como esperado. Só quem migrar para o Bootstrap 5 precisará substituir por CSS personalizado.
Posso usar style inline em vez de criar classe?
Pode, mas evite em projetos grandes. Estilos inline aumentam a especificidade no CSS (são mais difíceis de sobrescrever depois) e dificultam manutenção. Para um caso pontual ou e-mail HTML, vale. Para uma página inteira, crie uma classe CSS.
