Cómo estilo tarjetas en Bootstrap 5 | Explicado

Una tarjeta en Bootstrap 5 se conoce como un contenedor o una caja que envuelve contenido dentro de ella. Puede consistir en un encabezado, algo de contenido y un pie de página. Se puede diseñar agregando colores o imágenes. Estas tarjetas de arranque se consideran como un reemplazo para paneles viejos, miniaturas o pozos. En este artículo se ha discutido cómo se crean y diseñan estas tarjetas de varias maneras.

Cómo crear una tarjeta usando Bootstrap 5

Con el fin de crear una tarjeta simple, haga un contenedor Div y asigne el .tarjeta clase y nida un divlo dentro del primer div y asignarlo el .cuerpo de cartas clase y coloque el contenido de la tarjeta dentro de este div.

Html

Esta es una tarjeta simple

El código indicado anteriormente creará una tarjeta muy simple.

Producción

La salida muestra una tarjeta básica.

Cómo agregar un encabezado y un pie de página en una tarjeta

Como ya se mencionó, una tarjeta puede consistir en un encabezado y un pie de página. Por lo tanto, para hacer que estas entidades usen el .cabeza de cabeza y el .footer clases.

Html

Este es el encabezado de la tarjeta
Este es el cuerpo de la tarjeta
Este es un pie de página de la tarjeta

En el código anterior, para hacer el encabezado de la tarjeta, estamos asignando un contenedor DIV el .clase de cabeza de tarjeta, luego para colocar un poco de contenido, estamos haciendo el cuerpo de la tarjeta usando el .clase de cuerpo de cartas, y por último para generar un pie de página del .Se usa la clase de footer de tarjeta.

Producción

La tarjeta que se muestra arriba tiene un encabezado, cuerpo y pie de página.

Cómo crear tarjetas coloridas

Para proporcionar colores de fondo a las tarjetas, simplemente use cualquiera de las clases de color de fondo que son .BG-Primary, .BG-SECUDARY, .BG-Danger, .BG-WARNING, .bisco, .BG-Info, .BG-MUTUT, .BG-Light, .BG-Dark.

Html

Tarjeta 1


Tarjeta 2


Tarjeta 3


Tarjeta 4


Tarjeta 5

Se generan un total de 5 tarjetas en el código anterior y a cada una se le ha dado un color diferente. Tenga en cuenta que las clases de color de fondo se asignan al DIV que tiene el .clase de tarjetas.

Producción

Las tarjetas coloridas se generaron con éxito.

Cómo agregar título, texto y enlaces a una tarjeta

Si está generando tarjetas que transmiten cierta información y desea agregar algún título, texto y enlaces a esa tarjeta, siga el código que se proporciona a continuación.

Html

Título

Algún texto.

Enlace

Para agregar un título el .clase de la tarjeta fue asignado a un elemento de encabezado (cualquier elemento de encabezado H1-H6 se puede usar), para incluir algún texto del .clase de texto fue asignado a un

El elemento y un enlace también se agregaron y se hizo holgable junto con un color azul utilizando el .clase de enlace de tarjetas.

Producción

Una tarjeta informativa se generó con éxito.

Cómo agregar imágenes a una tarjeta

Si desea agregar imágenes a sus tarjetas junto con algún texto y enlaces, siga el ejemplo a continuación.

Html

Mike Jason

Hola. Revisa mi perfil.

Visitar perfil

Para colocar la imagen dentro de la tarjeta, use el .clase de tarjetas Dentro de la etiqueta y luego, al igual que en la sección anterior, estamos haciendo un cuerpo de tarjeta y colocando un título, un texto y un enlace dentro del cuerpo de la tarjeta. Tenga en cuenta que la imagen se ha colocado fuera del cuerpo de la tarjeta para que se extienda todo el ancho que se ha proporcionado al contenedor Div que tiene la clase .tarjeta.

Producción

Sin embargo, si desea colocar su título, texto y enlace arriba de la imagen, use el .clase de cartas. Como hemos mostrado en el fragmento de código a continuación.

Html

Mike Jason

Hola. Revisa mi perfil.

Visitar perfil

El código de arriba generará una tarjeta con la imagen colocada en la parte inferior y el título, el texto y el enlace colocado arriba esa imagen.

Producción

El .La clase de tarjetas-img es funcionando correctamente.

Cómo crear una superposición de imagen de tarjeta

Además de colocar su contenido sobre y debajo de la imagen, también puede colocarlo en la imagen y este procedimiento se conoce como superposición de la imagen de la tarjeta.

Html

Mike Jason

Hola. Revisa mi perfil.

Visitar perfil

El código es el mismo que en las secciones anteriores con una ligera diferencia que para colocar el contenido sobre la imagen estamos utilizando el .sobrecarga de tarjetas clase en lugar del .clase de cuerpo.

Producción

Una superposición de imagen de tarjeta se creó con éxito.

Conclusión

Con el fin de diseñar una tarjeta, puede agregarle un encabezado y un pie de página con el .encabezador de tarjetas, y .footer clase, mientras que todas las clases de color de fondo disponibles se pueden usar para crear tarjetas coloridas. Además, usa el .título de la tarjeta, .texto de la tarjeta, .clases de enlace de tarjetas Para agregar un título, texto y enlaces a una tarjeta. Para que sus tarjetas sean interesantes, puede agregar imágenes usando el .tarjeta-img-top, o .Clases de fondo de tarjetas. Por último, también puede crear una superposición de imagen de tarjeta utilizando el .clase de sobrecarga de tarjetas.