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:

Source code

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

Para conseguir como resultado:

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:

Source code

<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:

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:

Source code

<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:

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:

Source code

<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:

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:

Source code

<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:

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:

Source code

<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:

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:

Source code

<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:

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:

Source code

<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:

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:

Source code

<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:

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:

Con la siguiente estructura se consigue:

Source code

<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.