Bootstrap 4 tarjetas colores de borde

Las tarjetas son contenedores flexibles de bootstrap 4. Proporcionan encabezado, texto, colores de fondo contextuales y muchas otras opciones beneficiosas. Hay cientos de clases de bootstrap que se utilizan para peinar los elementos. Por ejemplo, para ajustar el color de fondo de los elementos, el "BG"La clase se especifica con las clases de color, como"BG-Primary","BG-Info", y muchos más.

Esta publicación ilustrará:

• Cómo crear una tarjeta en Bootstrap?
• Tarjetas de colores de borde en bootstrap
• Cómo agregar el color del borde a las tarjetas en bootstrap?

Cómo crear una tarjeta en Bootstrap?

El bootstrap "tarjetaLa clase se puede usar para crear una tarjeta. Puede especificar el encabezado de la tarjeta, el texto y los componentes para la tarjeta utilizando las clases, como "título de la tarjeta","cuerpo de cartas", y "footer":

Linuxhint

Misión de Linuxhint

Proporcionamos las habilidades y conocimientos tecnológicos en demanda para educar al mundo.

Contacto: xxx-xxx-xxxx

Producción

Tarjetas de colores de borde en Bootstrap 4

Se utilizan varias clases de arranque para aplicar bordes coloridos alrededor de la tarjeta. Algunos de ellos se dan a continuación:

Clases fronterizas	Descripción
advertencia de fronteras	Esta clase aplica el color amarillo al borde.
titular	Esta clase aplica el color verde al borde.
amenazador de fronteras	Esta clase aplica el color rojo al borde.
luz fronteriza	Esta clase aplica el color gris claro al borde.
fronteras	Esta clase aplica el color azul cielo a la frontera.
fronterizo-primario	Esta clase aplica el color azul al borde.
bordes oscuro	Esta clase aplica el color gris oscuro al borde.
fronteriza	Esta clase aplica el color gris al borde.

Cómo agregar el color del borde a las tarjetas?

Para una mejor comprensión, agregemos un "titularClase "dentro de la""Elemento tiene clase"tarjeta"Para ver el efecto.

Ejemplo 1: Agregar color de borde a una sola tarjeta en Bootstrap

En este ejemplo, el "titularLa clase se utiliza para aplicar el borde verde alrededor de la tarjeta:

Linuxhint

Misión de Linuxhint

Proporcionamos las habilidades y conocimientos tecnológicos en demanda para educar al mundo.

La salida dada verifica que el borde verde se ha aplicado con éxito alrededor de la tarjeta:

Mira el ejemplo a continuación que representa otras clases de color de borde aplicados a las tarjetas.

Ejemplo 2: Agregar colores de borde a varias cartas en Bootstrap

Aquí, estamos agregando colores de borde a varias tarjetas en Bootstrap con la ayuda de las clases especificadas:

Linuxhint

Misión de Linuxhint

Proporcionamos las habilidades y conocimientos tecnológicos en demanda para educar al mundo.

Linuxhint

Misión de Linuxhint

Proporcionamos las habilidades y conocimientos tecnológicos en demanda para educar al mundo.

Linuxhint

Misión de Linuxhint

Proporcionamos las habilidades y conocimientos tecnológicos en demanda para educar al mundo.

Producción

Ejemplo 3: Agregar colores de borde a múltiples componentes de una sola tarjeta en Bootstrap

Los usuarios también pueden aplicar colores de borde alrededor de otros componentes de la tarjeta. Por ejemplo, hemos aplicado las clases de color del borde en la tarjeta, el encabezado de la tarjeta y el pie de página de la tarjeta:

Linuxhint

Misión de Linuxhint

Proporcionamos las habilidades y conocimientos tecnológicos en demanda para educar al mundo.

Contacto: xxx-xxx-xxxx

Producción

Se trata de aplicar los colores de borde de la tarjeta en Bootstrap 4.

Conclusión

El "tarjetaLa clase se utiliza para crear una tarjeta en bootstrap. Para agregar un borde alrededor de la tarjeta, el "bordeSe implementa la clase "con la clase de color, como el"fronterizo-primario"Clase utilizada para un borde azul", ",amenazador de fronteras"Para un borde rojo, y muchos más. Este blog ha explicado los colores del borde de la tarjeta en Bootstrap 4.