Cores de texto e cores de fundo Classes no bootstrap 5 | Explicado

As cores são uma ótima maneira de fornecer significado ao conteúdo que aparece em um site. Bootstrap 5 Assim como as versões anteriores também oferece várias classes para dar cores ao texto e cor de fundo para elementos. Essas classes ajudam a gerar folhas de estilo com menos linhas de código que são muito mais gerenciáveis. Aqui neste post, vamos explorar várias classes de bootstrap 5 ligadas à cor do texto e cor de fundo.

Classes de cores de texto

Bootstrap 5 classes vinculadas a cores de texto ajudam a fornecer significado ao texto. Essas classes são chamadas de classes de utilitário de cores e também são usadas para estilizar links com estados pairar.

Todas as classes relacionadas à cor do texto junto com o significado que estes transmitem são explicadas aqui.

.Primary de texto

Dá uma cor azul ao texto e representa uma peça importante de texto.

.Texto-secundário

Ele fornece uma cor cinza para o texto e representa texto secundário.

.Texto-sucesso

Esta classe dá uma cor verde ao texto e representa o sucesso.

.Danger de texto

Como o nome sugere, esta classe indica perigo e dá uma cor vermelha ao texto.

.envergonhamento de texto

Fornece uma cor amarela ao texto e indica um aviso.

.Text-Info

Esta classe é usada para representar uma informação e fornecer um tom mais claro de azul ao texto.

.luz de texto

Dá uma cor cinza clara ao texto.

.escuro em texto

Esta aula dá uma cor cinza escura ao texto.

.Corpo de texto

Ele fornece cor para o corpo do texto que é preto por padrão.

.Mutado por texto

Representa um texto suave e dá uma cor cinza clara.

.Texto branco

Como o nome representa, esta classe fornece uma cor branca para o texto.

Agora vamos demonstrar todas essas cores através de um exemplo para que você possa aprender a usá -las.

Exemplo

Considere o exemplo abaixo.

Html

Algum texto importante

Texto com cor cinza.

Vitória

Perigo.

Aviso

Esta é uma informação importante

Olá Mundo!

Este é um texto temático escuro

Este é o texto do corpo

Este texto está silenciado

Este é um texto com cor branca

No código acima, simplesmente criamos múltiplos

elementos e atribuíram cada parágrafo uma classe de cores de texto diferente.

Saída

Todas as aulas de cores de texto foram demonstradas com sucesso.

Adicionando opacidade ao texto

Existem duas classes associadas à cor do texto no bootstrap 5 que adicionam opacidade ao texto. Estes são explicados abaixo.

.Text-Black-50

Isso representa um texto de cor preta com 50% de opacidade com um fundo branco.

.Texto-branco-50

Isso representa um texto de cor branca com 50% de opacidade com um fundo preto.

Vamos ver um exemplo.

Exemplo

No exemplo abaixo, estamos adicionando opacidade ao texto usando as classes mencionadas acima.

Html

Este parágrafo tem uma cor preta, 50% de opacidade e um fundo branco

Este parágrafo tem uma cor branca, 50% de opacidade e um fundo preto

Aqui estamos atribuindo os dois parágrafos uma classe diferente para adicionar opacidade ao texto presente dentro daqueles parágrafos. Você também deve ter notado que, neste exemplo e no exemplo acima, damos uma cor de fundo preta aos elementos usando uma classe de cor de fundo. As aulas de cores de fundo no Bootstrap 5 foram discutidas na próxima seção.

Saída

A opacidade foi adicionada com sucesso ao texto.

Classes de cores de fundo

As classes de cores de fundo no bootstrap 5 fornecem cor para os elementos. Os nomes dessas classes são semelhantes às classes de cores do texto com a única diferença que o prefixo "BG" é usado para as classes associadas às cores de fundo.

Tenha isso em mente que essas classes fornecem cor de fundo para elementos, não o texto. Todas as classes associadas à cor de fundo são explicadas com um exemplo demonstrado abaixo.

Exemplo

Consulte o exemplo abaixo para entender as classes de cores de fundo no bootstrap 5.

Html

Algum texto importante

Texto com cor cinza.

Vitória

Perigo.

Aviso

Esta é uma informação importante

Olá Mundo!

Este é um texto temático escuro

Este é um texto com cor branca

No código acima, criamos vários parágrafos e adicionamos uma cor de fundo diferente a cada.

Saída

As cores de fundo foram adicionadas com sucesso aos parágrafos.

Conclusão

Aulas de cores no bootstrap 5 fornecem cor para o texto, além de fornecer um certo significado sobre o texto. Enquanto isso, as classes associadas à cor de fundo fornecem cores ao fundo dos elementos. Classes vinculadas ao texto e plano de fundo têm nomes semelhantes com diferentes prefixos. Para classes de cores de texto, o prefixo é .texto-, Enquanto isso, para aulas de cores de fundo, o prefixo é .bg-. Este post discute cada uma das categorias de classe em detalhes, juntamente com exemplos apropriados.