Author : Jhon
Publicado : 25 diciembre, 2019
Las tarjetas en bootstrap 4 sirven como tarjeta de presentación de personas, elementos…etc.
Para usarlas debemos de entender que están divididas en tres partes:
header
body
footerEstas 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="http://localhost/_newtheme/wp-content/uploads/2019/12/img-modelo-pintura.jpg" alt="Modelo artista">
<div class="card-body">
<h3 class="card-title">Jenny Model</h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et lorem semper, lobortis diam quis, lacinia arcu. Pellentesque id ultrices lorem, sit amet tempor quam. Aliquam erat volutpat.</p>
<a href="#" class="btn btn-primary">VER PERFIL</a>
</div>
<div class="card-footer">
Rusia
</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:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et lorem semper, lobortis diam quis, lacinia arcu. Pellentesque id ultrices lorem, sit amet tempor quam. Aliquam erat volutpat.
VER PERFIL
Deja una respuesta