Colores de texto y clases de colores de fondo en Bootstrap 5 | Explicado
Clases de color de texto
Bootstrap 5 clases que están vinculadas a los colores de texto ayudan a proporcionar significado al texto. Estas clases se denominan clases de utilidad de color y también se utilizan para diseñar enlaces con estados de ciervo.
Todas las clases relacionadas con el color del texto junto con el significado que estos transmiten se explican aquí.
.presente de texto
Da un color azul al texto y representa una pieza importante de texto.
.texto
Proporciona un color gris al texto y representa el texto secundario.
.titular de texto
Esta clase le da un color verde al texto y representa el éxito.
.amenazador de texto
Como su nombre indica, esta clase indica peligro y le da un color rojo al texto.
.advertencia de texto
Proporciona un color amarillo al texto e indica una advertencia.
.info de texto
Esta clase se utiliza para representar una información y proporcionar un tono azul más ligero al texto.
.luz de texto
Da un color gris claro al texto.
.oscuridad
Esta clase le da un color gris oscuro al texto.
.cuerpo de texto
Proporciona color al cuerpo del texto que es negro de forma predeterminada.
.muutio
Representa un texto apagado y le da un color gris claro.
.blanco de texto
Como el nombre representa, esta clase proporciona un color blanco al texto.
Ahora demostraremos todos estos colores a través de un ejemplo para que pueda aprender a usarlos.
Ejemplo
Considere el ejemplo a continuación.
Html
Algún texto importante
Texto con color gris.
Victoria
Peligro.
Advertencia
Esta es una información importante
Hola Mundo!
Este es un texto temático oscuro
Este es el texto del cuerpo
Este texto está silenciado
Este es un texto con color blanco
En el código anterior, simplemente hemos creado múltiples
elementos y asignado cada párrafo una clase de color de texto diferente.
Producción
Todas las clases de color de texto se demostraron con éxito.
Agregar opacidad al texto
Hay dos clases asociadas con el color de texto en Bootstrap 5 que agregan opacidad al texto. Estos se explican a continuación.
.texto-negro-50
Esto representa un texto de color negro que tiene un 50% de opacidad con fondo blanco.
.Texto-White-50
Esto representa un texto de color blanco que tiene un 50% de opacidad con un fondo negro.
Veamos un ejemplo.
Ejemplo
En el siguiente ejemplo, estamos agregando opacidad al texto utilizando las clases mencionadas anteriormente.
Html
Este párrafo tiene un color negro, 50% de opacidad y un fondo blanco
Este párrafo tiene un color blanco, 50% de opacidad y un fondo negro
Aquí estamos asignando a ambos párrafos una clase diferente para agregar opacidad al texto presente dentro de esos párrafos. También debe haber notado que en este ejemplo y en el ejemplo anterior hemos dado un color de fondo negro a los elementos utilizando una clase de color de fondo. Las clases de color de fondo en Bootstrap 5 se han discutido en la próxima sección.
Producción
La opacidad se agregó con éxito al texto.
Clases de color de fondo
Las clases de color de fondo en Bootstrap 5 proporcionan color a los elementos. Los nombres de estas clases son similares a las clases de color de color de texto con la única diferencia que el prefijo "BG" se usa para las clases asociadas con colores de fondo.
Tenga esto en cuenta que estas clases proporcionan color de fondo a los elementos, no el texto. Todas las clases asociadas con el color de fondo se explican con un ejemplo demostrado a continuación.
Ejemplo
Consulte el siguiente ejemplo para comprender las clases de color de fondo en Bootstrap 5.
Html
Algún texto importante
Texto con color gris.
Victoria
Peligro.
Advertencia
Esta es una información importante
Hola Mundo!
Este es un texto temático oscuro
Este es un texto con color blanco
En el código anterior, hemos creado múltiples párrafos y agregamos un color de fondo diferente a cada uno.
Producción
Los colores de fondo se agregaron con éxito a los párrafos.
Conclusión
Las clases de color en Bootstrap 5 proporcionan color al texto y entregan un cierto significado con respecto al texto. Mientras tanto, las clases asociadas con el color de fondo proporcionan color al fondo de los elementos. Las clases vinculadas al texto y los antecedentes tienen nombres similares con diferentes prefijos. Para clases de color de texto, el prefijo es .texto-, Mientras tanto, para las clases de color de fondo, el prefijo es .BG-. Esta publicación analiza cada una de las categorías de clases en detalle junto con los ejemplos apropiados.