Tarjetas de presentación (cards) en Bootstrap 4

Las cards o tarjetas de presentación son un recurso de Bootstrap que suelo utilizar muy a menudo ya que la información que puede mostrar queda muy bien organizada y puede servir para cualquier tipo de contenido.

Las tarjetas de Bootstrap brindan un contenedor de contenido flexible y extensible con múltiples variantes y opciones que no puedes pasar por alto.

Las cards de Bootstrap incluyen opciones para encabezados y pies de página, una amplia variedad de contenido, colores de fondo contextuales y potentes opciones de visualización.

Si estás familiarizado con Bootstrap 3, las tarjetas reemplazan los viejos paneles, pozos y miniaturas. Una funcionalidad similar a esos componentes está disponible como clases de modificadores para tarjetas.

Por ejemplo: Las tarjetas se construyen con la menor cantidad de etiquetas y estilos posible, pero aun así logran ofrecer una tonelada de control y personalización.

Construidos con flexbox, ofrecen una fácil alineación y se combinan bien con otros componentes de Bootstrap.

No tienen margen por defecto, pero esto no es un problema sabiendo que puedes usar las utilidades de espaciado según sea necesario.

Tipos de contenido

Las tarjetas admiten una amplia variedad de contenido, incluidas imágenes, texto, grupos de listas, enlaces y más.

A continuación se muestran ejemplos de lo que se admite.

Cuerpo de la tarjeta

La expresión  mínima de una tarjeta es el cuerpo o «card-body».

En Bootstrap, el bloque de construcción de una tarjeta es el .card-body.

Puedes usarlo siempre que necesites una sección acolchada dentro de una tarjeta.

Ejemplo:

<div class="card">
    <div class="card-body">Lorem ipsum...</div>
</div>

Para conseguir como resultado:

card-body

Títulos, texto y enlaces en el cuerpo de una tarjeta

Los títulos de las tarjetas se usan agregando .card-title a una etiqueta <h*>.

De la misma manera, los enlaces se agregan y colocan uno al lado del otro agregando .card-link a una etiqueta <a>.

Los subtítulos se usan agregando un .card-subtitle a una etiqueta <h*>.

Si los elementos .card-title y .card-subtitle se colocan en un elemento .card-body, el título y el subtítulo de la tarjeta se alinearán correctamente.

Ejemplo completo:

<div class="card mb-3">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
    </div>
</div>

Y así podemos obtener lo siguiente:

card-body-complete

Cabecera y pie de página de una tarjeta

Al cuerpo de una tarjeta se le puede anidar dos contenedores para armar una cabecera y/o pie de página.

Por ejemplo:

<div class="card">
    <div class="card-header">Lorem ipsum</div>
    <div class="card-body">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
    <div class="card-footer text-muted">09/04/2022</div>
</div>

Par obtener como resultado:

card-header-body-footer

Imagen de cabecera en la tarjeta

.card-img-top coloca una imagen en la parte superior de la tarjeta.

Con .card-text, se puede agregar texto a la tarjeta. El texto dentro de .card-text también se puede diseñar con las etiquetas HTML estándar.

Fíjate en la siguiente estructura HTML:

<div class="card" style="width: 18rem;">
    <img src="img/city.jpg" class="card-img-top">
    <div class="card-body">
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

Dentro de .card es donde colocamos la imagen con .card-img-top para obtener como resultado:

card-img-top

Con .card-img-bottom puedes agregar una imagen en el pie de página de la tarjeta.

El código HTML sería el siguiente:

<div class="card mb-3" style="width: 18rem;">
    <div class="card-body">
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
    <img src="img/city.jpg" class="card-img-bottom">
</div>

Resultado:

card-img-bottom

Superposiciones de imágenes

Convierte una imagen en el fondo de la tarjeta y superpón el texto de su tarjeta.

Dependiendo de la imagen, es posible que necesite o no estilos o utilidades adicionales.

Ejemplo HTML:

<div class="card bg-dark text-white mb-3">
    <img src="img/city.jpg" class="card-img">
    <div class="card-img-overlay">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text">Last updated 3 mins ago</p>
    </div>
</div>

 

Para conseguir como resultado:

image-overlay

Tarjeta horizontal

Usando una combinación de cuadrícula y clases de utilidad, las tarjetas se pueden hacer horizontales de una manera receptiva y compatible con dispositivos móviles.

Código de marcado:

<div class="card mb-3" style="max-width: 100%;">
    <div class="row no-gutters">
      <div class="col-md-4">
        <img class="img-fluid" src="img/city.jpg">
      </div>
      <div class="col-md-8">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
      </div>
    </div>
</div>

Y el resultado es el siguiente:

card-horizontal

Grupos de listas

Crear listas de contenido en una tarjeta con un grupo de listas es muy sencillo también.

Observa el siguiente código de marcado:

<div class="card" style="width: 18rem;">
    <div class="card-header">
      Grupo de lista
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Item 1</li>
        <li class="list-group-item">Item 2</li>
        <li class="list-group-item">Item 3</li>
    </ul>
</div>

Para obtener:

card-group-list

Estilos adicionales para la tarjeta

Las tarjetas incluyen varias opciones para personalizar sus fondos, bordes y colores.

Fondo y color

Usa las utilidades de texto y fondo para cambiar la apariencia de una tarjeta.

Para conseguir una tarjeta con fondo de color primario puedes hacer agregar la clase .bg-primary a tu tarjeta:

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h5 class="card-title">Primary card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

Como ya sabes, en Bootstrap puedes usar distintos colores que ya tienes preestablecidos:

bg-color-card

Bordes para las tarjetas

Con Bootstrap puedes usar las utilidades de borde para cambiar solo el color del borde de una tarjeta.

Ten en cuenta que puedes colocar clases .text-{color} en la tarjeta principal o en un subconjunto del contenido de la tarjeta, como se muestra a continuación:

card-border-primary

Con la siguiente estructura se consigue:

<div class="card border-primary mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-primary">
        <h5 class="card-title">Primary card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

Ver demo Descargar

Conclusiones

Puedo asegurar que las tarjetas de presentación o cards son uno de los recursos de Bootstrap que más he utilizado en mis proyectos.

Tanto es así, que podrás observar que en este mismo blog las estoy utilizando para mostrar el contenido de una entrada y en el sitio de demostración también para mostrar el cuerpo de la demo.

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(1 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre