Las tarjetas de Bootstrap son contenedores visuales que organizan imágenes, texto y botones en un solo bloque limpio y responsivo.
¿Sabías que el 73% de los usuarios abandona una página si la información se ve desordenada? Las tarjetas resuelven ese problema de forma sencilla.
Qué es una tarjeta en Bootstrap
Una tarjeta es como una hoja de papel digital. Tiene un borde suave, un fondo blanco y puede contener casi cualquier cosa.
Bootstrap usa la clase card para crearlas. Es uno de los componentes más usados en sitios reales de México y el mundo.
Imagina la sección de productos de Liverpool. Cada artículo aparece en su propio recuadro con foto, nombre y precio. Eso es una tarjeta.
La estructura básica de una tarjeta
Una tarjeta mínima necesita solo tres cosas: el contenedor, el cuerpo y el texto.
<div class="card">
<div class="card-body">
<h5 class="card-title">Producto destacado</h5>
<p class="card-text">Descripción breve del producto.</p>
<a href="#" class="btn btn-primary">Ver más</a>
</div>
</div>
La clase card crea el contenedor. La clase card-body agrega el relleno interior. Y card-title junto con card-text dan formato al contenido.
La historia de Rodrigo y su tienda en línea
Rodrigo tiene 28 años y vende accesorios para celular en Monterrey. Armó su página con HTML puro y todo se veía plano y aburrido.
Un amigo le enseñó las tarjetas de Bootstrap. En una tarde, Rodrigo transformó su catálogo en una cuadrícula visual de productos.
Sus ventas en línea subieron un 40% el siguiente mes. Solo por mejorar cómo se veía la información.
Agregar una imagen a tu tarjeta
Una tarjeta con imagen es mucho más atractiva. Bootstrap tiene la clase card-img-top para colocar la foto arriba del contenido.
<div class="card" style="width: 18rem;">
<img src="producto.jpg" class="card-img-top" alt="Funda para celular">
<div class="card-body">
<h5 class="card-title">Funda silicón premium</h5>
<p class="card-text">Compatible con iPhone y Samsung. Colores variados.</p>
<a href="#" class="btn btn-success">Comprar — $150</a>
</div>
</div>
El atributo alt es importante para accesibilidad. Siempre descríbelo con palabras cortas y claras.
También puedes usar card-img-bottom si quieres la imagen al final. Depende del diseño que busques.
Tarjetas en cuadrícula responsiva
Una sola tarjeta no hace una página. Lo poderoso es combinarlas con el sistema de columnas de Bootstrap.
Así puedes mostrar tres productos en escritorio y uno por línea en celular:
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="bimbo-pan.jpg" class="card-img-top" alt="Pan blanco">
<div class="card-body">
<h5 class="card-title">Pan blanco grande</h5>
<p class="card-text">El clásico de cada desayuno mexicano.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-warning">Ver precio</a>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="bimbo-integral.jpg" class="card-img-top" alt="Pan integral">
<div class="card-body">
<h5 class="card-title">Pan integral fibra</h5>
<p class="card-text">Alto en fibra para una alimentación equilibrada.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-warning">Ver precio</a>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="bimbo-multigrano.jpg" class="card-img-top" alt="Pan multigrano">
<div class="card-body">
<h5 class="card-title">Pan multigrano</h5>
<p class="card-text">Cinco granos en cada rebanada. Delicioso y nutritivo.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-warning">Ver precio</a>
</div>
</div>
</div>
</div>
La clase g-4 agrega espacio entre las tarjetas. Sin ella, se pegarían entre sí y se verían amontonadas.
La clase h-100 hace que todas las tarjetas tengan la misma altura. Muy útil cuando los textos son de diferente longitud.
La historia de Valentina y su portafolio profesional
Valentina es diseñadora gráfica en Ciudad de México. Cobraba $18,500 al mes y quería conseguir clientes freelance.
Creó un portafolio en línea usando tarjetas de Bootstrap. Cada tarjeta mostraba un proyecto con imagen, nombre y un botón de "Ver proyecto".
En dos semanas consiguió su primer cliente freelance. El portafolio se veía tan profesional que el cliente ni preguntó su precio: solo dijo "quiero eso".
El card-header y card-footer
Las tarjetas también pueden tener encabezado y pie de página. Esto es útil para planes de precios o servicios.
<div class="card text-center">
<div class="card-header">
Plan básico
</div>
<div class="card-body">
<h3 class="card-title">$299 / mes</h3>
<p class="card-text">Perfecto para emprendedores y freelancers en México.</p>
<a href="#" class="btn btn-primary">Empezar ahora</a>
</div>
<div class="card-footer text-muted">
Cancela cuando quieras
</div>
</div>
Fíjate en text-center. Es una clase utilitaria de Bootstrap para centrar texto sin escribir CSS extra.
También text-muted pone el texto en gris suave. Perfecto para notas secundarias como condiciones o aclaraciones.
Badges y pills: detalles que marcan diferencia
Los badges son pequeñas etiquetas de colores. Sirven para mostrar estado, categoría o novedad de un producto.
<h5 class="card-title">
Sudadera FEMSA edición especial
<span class="badge bg-danger">Nuevo</span>
</h5>
Puedes usar bg-success para "Disponible", bg-warning para "Últimas piezas" y bg-danger para "Agotado".
En un sitio como Mercado Libre, esos pequeños detalles visuales guían la decisión de compra del usuario.
Errores comunes al usar tarjetas
Error 1: Olvidar card-body
Si pones texto directamente dentro de card, se verá pegado a los bordes. Siempre usa card-body como capa intermedia.
Error 2: No usar h-100 en cuadrículas
Sin esta clase, las tarjetas tienen alturas diferentes. La cuadrícula se ve dispareja y poco profesional.
Error 3: Imágenes sin tamaño definido
Si tus imágenes tienen resoluciones distintas, las tarjetas se verán deformes. Usa imágenes del mismo tamaño o agrega object-fit: cover en CSS.
.card-img-top {
height: 200px;
object-fit: cover;
}
Eso garantiza que todas las fotos ocupen el mismo espacio sin distorsión.
Error 4: Mezclar clases de botones sin criterio
Usar btn-primary, btn-success y btn-danger en la misma sección confunde al usuario. Elige un color principal y sé consistente.
Error 5: Tarjetas sin ancho controlado fuera de cuadrícula
Si usas una tarjeta sola sin columnas, se expande al 100% del ancho. Usa style="max-width: 24rem;" o envuélvela en una columna del grid.
La historia de Don Ernesto y su restaurante en Puebla
Don Ernesto tiene 52 años y maneja un restaurante en el centro de Puebla. Su hijo menor le ayudó a crear un menú digital con Bootstrap.
Usaron tarjetas con foto del platillo, nombre, descripción y precio. Agregaron un badge rojo que decía "Chef recomienda" en tres platillos especiales.
Los clientes empezaron a llegar con el menú digital ya revisado desde su celular. El tiempo de atención bajó y las mesas rotaban más rápido.
Qué aprendiste hoy
Las tarjetas de Bootstrap son una herramienta sencilla con resultados poderosos. Con solo unas clases puedes construir catálogos, portafolios y menús que se ven profesionales.
No necesitas ser experto en CSS. Bootstrap ya hizo el trabajo difícil por ti.
La próxima vez que veas una página ordenada con productos o servicios, fíjate bien. Probablemente detrás hay una tarjeta de Bootstrap.