Las tarjetas en bootstrap 4 sirven como tarjeta de presentación de personas, elementos…

Para usarlas debemos de entender que están divididas en tres partes:

• header
• body
• footer

Estas secciones son opcionales, no es obligatorio el tenerlas todas pero son las básicas para tener una tarjeta completa. Incluso podemos introducir elementos adicionales dentro de la misma como imágenes, textos, encabezados…

En el siguiente ejemplo vemos una tarjeta completa de este tipo:

<div class="card w-25">
	<div class="card-header">
		<h3>Seguridad</h3>
	</div>
	<img src="img/homer.jpg" alt="Homer Simpson">
	<div class="card-body">
		<h3 class="card-title">Homer Simpson</h3>
		<p class="card-text">Sector 7G</p>
		<a href="#" class="btn btn-primary">VER PERFIL</a>
	</div>
	<div class="card-footer">
		Central de Springfield
	</div>
</div>

Vemos como lo primero que hay que hacer es crear un div con la clase card, aunque nosotros hemos añadido la clase w-25 para marcar el ancho según las propias clases de bootstrap 4, aunque esto no es necesario.

A continuación creamos otro div en su interior con la clase card-header donde ponemos el encabezado.

El siguiente elemento de la tarjeta es otro div con la clase card-body, donde se va a encontrar la parte del contenido de la misma.

Seguimos añadiendo una imagen y después un h3 con una clase llamada card-tittle.

Se puede continuar incluyendo párrafo por medio de card-text

El pie se añade por medio de un div con la clase card-footer.

Esto nos da el siguiente resultado:

Ya vamos conociendo suficientes elementos de bootstrap 4 para  añadir colores de fondo por medio de bg-[color] a cada sección de la tarjeta.

Como puedes ver el uso de tarjetas en bootstrap 4 es muy sencillo y puede llegar a ser muy útil para nuestros proyectos, ya que es una forma muy sencilla y visual de presentar información.