Tarjetas Bootstrap5

El componente de tarjeta (Card) de Bootstrap 5 es un contenedor potente y flexible para mostrar diversos contenidos, como texto, imágenes, listas, botones, etc.

El componente de tarjeta ha sido mejorado y potenciado en Bootstrap 5, ofreciendo más opciones de personalización y formas de diseño más flexibles.

El componente de tarjeta es muy común en el diseño de UI, especialmente adecuado para blogs, redes sociales, paneles de control y otras páginas de exhibición de contenido.

Base

Estructura

El componente de tarjeta de Bootstrap 5 incluye los siguientes elementos comunes:

  • .card: el contenedor más externo de la tarjeta.
  • .card-body: el área de contenido principal de la tarjeta.
  • .card-title: la sección de título de la tarjeta.
  • .card-text: la sección de texto de la tarjeta.
  • .card-img-topo.card-img-bottom: la imagen superior o inferior de la tarjeta.

Descripción de las clases de estilo de tarjeta:

Nombre de claseDescripciónEjemplo de uso
.cardClase contenedora de la tarjeta, utilizada para envolver toda la tarjeta.<div class="card">...</div>
.card-bodyContenedor que incluye el contenido de la tarjeta, generalmente se usa para colocar texto, títulos, etc.<div class="card-body">...</div>
.card-titleClase de título de la tarjeta, generalmente contiene el título principal de la tarjeta.<h5 class="card-title">Card Title</h5>
.card-textClase de texto de la tarjeta, generalmente contiene el cuerpo del texto de la tarjeta.<p class="card-text">Some quick example text...</p>
.card-img-topClase de imagen superior de la tarjeta, se utiliza para mostrar la imagen en la parte superior de la tarjeta.<img src="image.jpg.html" class="card-img-top">
.card-img-bottomClase de imagen inferior de la tarjeta, se utiliza para mostrar la imagen en la parte inferior de la tarjeta.<img src="image.jpg.html" class="card-img-bottom">
.card-headerÁrea de encabezado de la tarjeta, para colocar títulos u otro contenido.<div class="card-header">Card Header</div>
.card-footerÁrea de pie de la tarjeta, para colocar información adicional o botones de acción, etc.<div class="card-footer">Card Footer</div>
.card-linkSe utiliza para crear enlaces dentro de la tarjeta.<a href="../index.html" class="card-link">Card link</a>
.card-deckEn Bootstrap 5 ha quedado obsoleto, userowycolen su lugar.<div class="card-deck">...</div>
.card-groupEn Bootstrap 5 ha quedado obsoleto, userowycolen su lugar.<div class="card-group">...</div>
.card-columnsUsa un diseño de varias columnas, las tarjetas se distribuyen en un diseño de flujo.<div class="card-columns">...</div>
.card-subtitleSubtítulo de la tarjeta, normalmente se muestra debajo del título.<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
.card-img-overlaySuperpone una capa de contenido sobre la imagen de la tarjeta, comúnmente se usa para mostrar texto u otros elementos.<div class="card-img-overlay">Overlay content</div>

Tarjeta simple

Podemos, mediante la clase de Bootstrap 5,.cardy.card-bodyclase para crear una tarjeta simple. La tarjeta puede incluir encabezado, contenido, pie y varias configuraciones de color, como se muestra a continuación:

Ejemplo

<div class="card"> <div class="card-body">Tarjeta simple</div> </div>

Prueba »

Encabezado y pie

.card-headerLa clase se usa para crear el estilo del encabezado de la tarjeta,.card-footerLa clase se usa para crear el estilo del pie de la tarjeta:

Ejemplo

<div class="card"> <div class="card-header">Encabezado</div> <div class="card-body">Contenido</div> <div class="card-footer">Pie</div> </div>

Prueba »

Tarjetas de varios colores

Bootstrap 5 proporciona varias clases de color de fondo para tarjetas:.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darky.bg-light。

Ejemplo

<div class="container"> <h2>Tarjetas de varios colores</h2> <div class="card"> <div class="card-body">Tarjeta básica</div> </div> <br> <div class="card bg-primary text-white"> <div class="card-body">Tarjeta principal</div> </div> <br> <div class="card bg-success text-white"> <div class="card-body">Tarjeta de éxito</div> </div> <br> <div class="card bg-info text-white"> <div class="card-body">Tarjeta de información</div> </div> <br> <div class="card bg-warning text-white"> <div class="card-body">Tarjeta de advertencia</div> </div> <br> <div class="card bg-danger text-white"> <div class="card-body">Tarjeta de peligro</div> </div> <br> <div class="card bg-secondary text-white"> <div class="card-body">Tarjeta secundaria</div> </div> <br> <div class="card bg-dark text-white"> <div class="card-body">Tarjeta negra</div> </div> <br> <div class="card bg-light text-dark"> <div class="card-body">Tarjeta clara</div> </div> </div>

Prueba »

Títulos, texto y enlaces

Podemos usar en el elemento de encabezado.card-titlela clase para establecer el título de la tarjeta..card-bodyLa clase se usa para establecer el contenido del cuerpo de la tarjeta..card-textLa clase se usa para configurar el.card-bodyetiqueta <p> dentro de la clase; si es la última línea, se puede eliminar el margen inferior..card-linkLa clase se usa para dar color a los enlaces.

Ejemplo

<div class="card"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some example text. Some example text.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div>

Prueba »

Tarjeta con imagen

Podemos agregar a <img>agregar.card-img-top(imagen sobre el texto) o.card-img-bottom(imagen debajo del texto) para configurar la tarjeta con imagen:

Ejemplo

<div class="card" style="width:400px"> <img class="card-img-top" src="img_avatar1.png" alt="Card image"> <div class="card-body"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some example text.</p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div>

Prueba »

Si la imagen se va a establecer como fondo, se puede usar.card-img-overlayla clase:

Ejemplo

<div class="card" style="width:500px"> <img class="card-img-top" src="img_avatar1.png" alt="Card image"> <div class="card-img-overlay"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some example text.</p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div>

Prueba »
Otras extensiones