Las tarjetas de Bootstrap son una herramienta esencial para organizar y presentar contenido en proyectos web. Proporcionan una forma simple pero versátil de crear diseños visualmente atractivos que se ajustan perfectamente a diferentes dispositivos. Al final de este artículo, sabrás cómo utilizar los componentes de tarjetas de Bootstrap de manera efectiva en tus proyectos.
¿Por qué elegir Bootstrap?
Bootstrap sigue siendo uno de los frameworks más populares para construir diseños web receptivos y orientados a dispositivos móviles. Sus principales beneficios incluyen:
- Diseño receptivo rápido y sencillo: Solo necesitas conocimientos básicos de HTML y CSS para crear diseños impresionantes.
- Enfoque móvil primero: Bootstrap prioriza la respuesta móvil desde cero.
- Compatibilidad con navegadores: Funciona perfectamente en todos los principales navegadores.
- Sistema de rejilla alimentado por Flexbox: Simplifica las tareas de alineación y espaciado.
- Componentes extensos: Una amplia gama de elementos reutilizables como botones, modales y tarjetas.
La última versión de Bootstrap introduce mejoras significativas, como el soporte para Flexbox y el versátil componente de tarjeta, que reemplaza a componentes anteriores como paneles y miniaturas.
Conclusiones clave
Las tarjetas de Bootstrap son herramientas versátiles para crear diseños organizados y receptivos. Te permiten mostrar diversos tipos de contenido como texto, imágenes y multimedia dentro de un contenedor elegante. A continuación se presentan algunas características clave que las hacen indispensables para los desarrolladores:
- Fácil de Usar: Puedes crear rápidamente una tarjeta combinando elementos como div class=”card-body”, que define el área de contenido, y p class=”card-text”, donde reside la información textual.
- Soporte para Múltiples Tipos de Contenido: Agrega un título de tarjeta, imágenes o grupos de listas para estructurar tu contenido de manera efectiva.
- Receptividad: Utilizando la cuadrícula y los puntos de interrupción de Bootstrap, las tarjetas pueden adaptarse a cualquier tamaño de dispositivo, desde móviles hasta escritorios.
- Diseño Personalizable: Las clases de utilidad te permiten ajustar la apariencia, incluidos colores, bordes y alineación de texto.
- Diseños Avanzados: Funciones como grupos de tarjetas, decks y diseños de mampostería permiten una alineación y organización sin problemas.
¿Qué es el componente de tarjeta de Bootstrap?
Bootstrap introduce un componente de IU versátil y moderno llamado tarjetas, que sirven como contenedores flexibles y elegantes para mostrar diversos tipos de contenido. Con un estilo predeterminado mínimo, las tarjetas de Bootstrap se pueden mejorar fácilmente utilizando su amplia gama de clases de utilidad.
Este componente se basa en Flexbox, lo que permite una alineación y espaciado precisos. Los desarrolladores pueden utilizar las utilidades de espaciado de Bootstrap para controlar márgenes y rellenos de manera efectiva.
Las tarjetas pueden acomodar cómodamente diferentes tipos de contenido como título, subtítulo, texto del cuerpo e imágenes, etc., y secciones opcionales de encabezado y pie de página. También puedes incluir diferentes secciones (bloques de tarjeta) para construir diferentes tipos de tarjetas según tu uso.
Clases Clave de Tarjeta de Bootstrap
A continuación se presentan las clases de utilidad clave de la tarjeta de Bootstrap, junto con su propósito:
- card: La clase contenedora principal que define el componente de la tarjeta.
- card-body: Crea el área de contenido principal dentro de la tarjeta.
- card-title: Estiliza el título de la tarjeta, generalmente utilizado con etiquetas de encabezado como <h5>.
- card-text: Utilizado para contenido textual estándar dentro de la tarjeta.
- card-header: Agrega una sección de encabezado estilizada en la parte superior de la tarjeta.
- card-footer: Agrega una sección de pie de página estilizada en la parte inferior de la tarjeta.
- card-img-top: Coloca una imagen en la parte superior de la tarjeta.
- card-img-bottom: Coloca una imagen en la parte inferior de la tarjeta.
- list-group: Crea un grupo de lista dentro de la tarjeta.
- list-group-item: Estiliza elementos individuales en el grupo de lista.
- card-group: Agrupa varias tarjetas juntas con ancho y alto iguales.
- card-deck: Alinea varias tarjetas con espaciado, obsoleto en Bootstrap 5.
- text-*: Clases de utilidad para estilizar el color del texto (por ejemplo, text-primary, text-success).
- bg-*: Clases de utilidad para estilizar el color de fondo (por ejemplo, bg-light, bg-dark).
Esta descripción general concisa lista las clases esenciales utilizadas para construir y personalizar las tarjetas de Bootstrap.
Cómo Incluir Bootstrap en Tu Proyecto
Puedes comenzar a usar Bootstrap en tu proyecto de manera sencilla incluyéndolo desde una Red de Entrega de Contenidos (CDN) o descargando los archivos necesarios desde getbootstrap.com
Para este ejemplo, demostraremos cómo configurar una página HTML simple utilizando un CDN para incluir el componente de tarjeta de Bootstrap. Este método te permite crear y estilizar rápidamente tarjetas sin necesidad de configuración adicional.
Sigue los pasos a continuación para crear tu archivo index.html e incluir Bootstrap 5.3.3:
<!doctype html>
<html lang="en">
<head>
<!-- Meta etiquetas requeridas -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS de Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title>Bootstrap Card Example</title>
</head>
<body>
<div class="container mt-5">
<div class="card" style="width: 18rem;">
<div class="card-header bg-primary text-white">
Example Card Header
</div>
<div class="card-body">
<h5 class="card-title">Example Card Title</h5>
<p class="card-text">This is an example card created using Bootstrap 5. It includes styling for the
header, title, and text.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<!-- Conjunto de Bootstrap con Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>Hemos incluido los archivos de Bootstrap a través de un CDN, asegurando que la última versión del framework esté siempre disponible. Se ha añadido una división de contenedor para servir como base para tu contenido, permitiéndote comenzar a construir con el componente de tarjeta de Bootstrap de inmediato.
Para más detalles, puedes explorar la documentación de la plantilla de inicio.
Creando Tarjetas Básicas de Bootstrap
Para crear una tarjeta simple, sigue estos pasos:
- Usa la clase .card con una etiqueta <div> para crear el contenedor exterior.
- Agrega la clase .card-body a una etiqueta <div> interna para definir el cuerpo de la tarjeta.
- Usa las clases .card-title y .card-subtitle con etiquetas de encabezado (<h5> y <h6>) para añadir el título y el subtítulo de la tarjeta.
- Usa la clase .card-text con etiquetas <p> para incluir contenido textual.
- Usa la clase .card-img-top con la etiqueta <img> para añadir una imagen en la parte superior de la tarjeta.
Estos son los bloques de construcción fundamentales de un diseño de tarjeta básica. Aquí tienes un ejemplo:
<div class="card" style="width: 30rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<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">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Este código genera una tarjeta con una imagen, título, subtítulo, texto y un botón, y se ajustará al ancho de su contenedor padre a menos que se especifique lo contrario utilizando la propiedad style=”width: 30rem;”
Esta es una captura de pantalla del resultado:
Tarjetas Horizontales en Bootstrap
Las tarjetas horizontales te permiten mostrar contenido en un diseño lado a lado, haciéndolas ideales para diseños compactos y organizados. Puedes crearlas utilizando clases de rejilla para un comportamiento receptivo, asegurando que la tarjeta se vea genial en todos los dispositivos.
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="https://picsum.photos/id/0/800" class="img-fluid rounded-start" alt="Image">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is a card with text beside an image, perfect for showcasing content
side-by-side.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>Esta es una captura de pantalla del resultado:
Grupos de Listas en Tarjetas de Bootstrap
Bootstrap te permite mejorar tus tarjetas incluyendo grupos de listas, facilitando la visualización de contenido estructurado y organizado. Las clases list-group y list-group-flush se integran perfectamente en las tarjetas, permitiendo a los desarrolladores crear listas visualmente atractivas.
Así es como puedes crear una tarjeta con un grupo de lista en flujo:
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
Mejorando las Características de la Tarjeta
Agregando Encabezados y Pies de Página
Puedes mejorar tus tarjetas incluyendo encabezados y pies de página con las clases .card-header y .card-footer. Aquí tienes un ejemplo:
<div class="row">
<div class="col-sm-3">
<div class="card">
<div class="card-header">
This is a header
</div>
<img class="card-img-top" src="https://source.unsplash.com/daily" alt="Card image top">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<h4 class="card-subtitle">Card subtitle</h4>
<p class="card-text">This is a simple Card example</p>
</div>
<div class="card-footer">
This is a footer
</div>
</div>
</div>
</div> Esta es la captura de pantalla del resultado:
Este diseño agrega más contexto a la tarjeta con un encabezado y pie de página estilizados.
Sobreponiendo Texto en Imágenes
Usa .card-img-overlay para superponer contenido sobre la imagen. Simplemente cambiando la clase card-body por la clase card-img-overlay, podemos usar la imagen como superposición:
<div class="card" style="width: 30rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<div class="card-img-overlay">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Esta es una captura de pantalla del resultado:
Agregando Tapas de Imagen a la Tarjeta
Agrega imágenes en la parte superior o inferior de la tarjeta usando .card-img-top o .card-img-bottom.
<div class="card" style="width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<p class="card-text">This card has an image cap at both the top and bottom.</p>
</div>
<img src="https://picsum.photos/id/0/800" class="card-img-bottom" alt="Card image bottom">
</div>Esta es una captura de pantalla del resultado:
Las imágenes superiores e inferiores de la tarjeta se llaman image caps.
Diseño adaptable con tarjetas de Bootstrap
El diseño adaptable garantiza que tus tarjetas se vean geniales en todos los dispositivos. Utiliza el sistema de cuadrícula de Bootstrap para controlar el diseño.
Código de ejemplo
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<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">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/85/800" class="card-img-top" alt="Card image">
<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">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>Esta es una captura de pantalla del resultado:
Ajuste de la altura y anchura de la tarjeta de Bootstrap
Para establecer un ancho específico para una tarjeta, puedes usar el atributo de estilo o las clases de utilidad de Bootstrap. Aquí tienes un ejemplo:
<div class="card" style="width: 10rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is a simple card example with a custom width.</p>
</div>
</div>Esta es una captura de pantalla del resultado:
El ancho de esta tarjeta está limitado a 10rem, lo cual se puede ajustar según las necesidades de tu diseño.
Normalmente, la altura de la tarjeta se ajustará para adaptarse verticalmente al contenido de la tarjeta, pero también podemos controlarla utilizando CSS personalizado (por ejemplo, style=”height: 10rem;”) o las utilidades de tamaño de Bootstrap (por ejemplo,
Tenga en cuenta que la última versión de Bootstrap ha cambiado a unidades rem en lugar de unidades px porque rem es una unidad de medida escalable, lo que funciona mejor con los ajustes del usuario, lo que hace que el texto sea mucho más accesible. El resultado es que todos los elementos en la página se escalarán con el tamaño de la pantalla.
Puede aprender más sobre las nuevas características de Bootstrap en el artículo de SitePoint “Bootstrap: Características Súper Inteligentes para Conquistarte”.
Usando el Sistema de Grid para Controlar el Ancho
Otra opción para controlar el ancho del componente de tarjeta de Bootstrap es usar la rejilla de Bootstrap (filas y columnas):
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example card using the grid system.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Another Card</h5>
<p class="card-text">This card sits next to the first one.</p>
</div>
</div>
</div>
</div>Esta es una captura de pantalla del resultado:
En este ejemplo, se muestran dos tarjetas una al lado de la otra, cada una ocupando cuatro columnas (col-md-4) en pantallas medianas y más grandes.
Estilos de Tarjeta
Bootstrap proporciona varias opciones para personalizar tarjetas, incluyendo colores de fondo, bordes y estilos de texto.
Colores de Fondo y Texto
Puede cambiar el fondo y los colores de texto de una tarjeta utilizando clases de utilidad como .bg-primary o .text-white.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body">
<h5 class="card-title">Primary Card Title</h5>
<p class="card-text">Quick text to demonstrate card styling.</p>
</div>
</div>Colores de Bordes
Utiliza .border-{color} clases para personalizar el color del borde de tus tarjetas. El texto dentro de la tarjeta también se puede estilizar con .text-{color}.
<div class="card border-success mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-success">
<h5 class="card-title">Success Card Title</h5>
<p class="card-text">Simple content styled with a border.</p>
</div>
</div>Encabezados y pies de página transparentes
Elimina el color de fondo de los encabezados y pies de página usando .bg-transparent y personaliza sus bordes.
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-info">Header</div>
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-info">
<h5 class="card-title">Info Card Title</h5>
<p class="card-text">Example content inside a card.</p>
</div>
<div class="card-footer bg-transparent border-info">Footer</div>
</div>Mezclando fondos y bordes
Combina utilidades de fondo y borde para un estilo único.
<div class="card bg-light border-dark mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-dark">
<h5 class="card-title">Mixed Style Card</h5>
<p class="card-text">Custom card combining background and border.</p>
</div>
</div>Aquí está el resultado que muestra cuatro estilos de tarjeta diferentes en un diseño de una sola fila:
Bootstrap te permite crear tarjetas con diferentes estilos de encabezado
- ‘encabezado título de tarjeta primaria’ para secciones principales
- ‘encabezado título de tarjeta ligera’ para diseños sutiles
- ‘encabezado título de tarjeta secundaria’ para tarjetas con texto de apoyo.
- ‘encabezado título de tarjeta oscura’ para looks audaces
- ‘encabezado título de tarjeta de éxito’ para mensajes positivos
- ‘encabezado título de tarjeta de peligro’ para advertencias.
Con estas versátiles opciones de estilo de tarjeta, también puedes crear diseños únicos como “encabezado título de tarjeta de advertencia”, “encabezado título de tarjeta de información” para enfatizar información crítica o llamar la atención sobre detalles específicos sin esfuerzo.
Agregando Navegación
Otra característica interesante del componente de tarjeta de Bootstrap es la posibilidad de agregar patrones de navegación avanzada a la sección del encabezado, como pestañas y píldoras de navegación.
Agregando pestañas al encabezado de la tarjeta
Para incluir pestañas en el encabezado de la tarjeta, utiliza las clases .nav-tabs y .card-header-tabs en una lista sin orden (<ul>). Aquí tienes un ejemplo:
<div class="card" style="width: 30rem;">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab 2</a>
</li>
</ul>
</div>
<div class="card-body">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<h5 class="card-title pt-3">Card with Tabs</h5>
<p class="card-text">This card includes a tabbed navigation element in its header.</p>
</div>
</div>Esta es la captura de pantalla del resultado:
Agregando Píldoras al Encabezado de la Tarjeta
De la misma manera, podemos agregar píldoras de navegación simplemente reemplazando .nav-tabs con .nav-pills y .card-header-tabs con .card-header-pill en la etiqueta de la lista <ul>:
<div class="card" style="width: 30rem;">
<div class="card-header">
<ul class="nav nav-pills card-header-pill">
<li class="nav-item">
<a class="nav-link active" href="#">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab 2</a>
</li>
</ul>
</div>
<div class="card-body">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<h5 class="card-title pt-3">Card with Tabs</h5>
<p class="card-text">This card includes a pill-style navigation element in its header.</p>
</div>
</div>Esta es la captura de pantalla del resultado:
Puedes encontrar más información al respecto en la documentación de componentes de navegación de Bootstrap
Agregando Enlaces al Componente de Tarjeta de Bootstrap
Rápidamente podemos agregar enlaces dentro de las tarjetas utilizando la etiqueta <a> con la clase .card-link :
<div class="card">
<div class="card-body">
<h3 class="card-title">Adding Links</h3>
<p class="card-text">These are simple links</p>
<a href="#" class="card-link">Link 1</a>
<a href="#" class="card-link">Link 2</a>
</div>
<div class="card-footer">
This is a footer
</div>
</div>Esta es la captura de pantalla del resultado:
Alineando y Transformando Texto en los Componentes de Tarjeta de Bootstrap
Bootstrap proporciona clases de utilidad de texto para alinear y transformar texto dentro de un componente de tarjeta. Para la alineación de texto, puedes utilizar las siguientes clases:
- .text-start para alinear el texto de la tarjeta a la izquierda
- .text-end para alinear el texto de la tarjeta a la derecha
- .text-center para alinear el texto de la tarjeta al centro
- .text-justify para justificar el texto de la tarjeta (se aplica a versiones anteriores, obsoleta en Bootstrap 5)
- .text-nowrap para evitar que el texto se ajuste
También puedes transformar el texto utilizando las siguientes clases:
- .text-lowercase para transformar el texto a minúsculas
- .text-uppercase para transformar el texto a mayúsculas
- .text-capitalize para capitalizar la primera letra de cada palabra
Personalizando los colores de fondo, primer plano y borde del componente de tarjeta de Bootstrap
Puedes personalizar el fondo, el texto y el borde de una tarjeta de Bootstrap colores utilizando clases utilitarias de texto y fondo. Aquí hay algunos ejemplos:
- Colores de Texto: Usa .text-primary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark, o .text-white para cambiar el color del texto.
- Colores de Fondo: Usa .bg-primary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark, o .bg-white para cambiar el color de fondo.
- Colores de Borde: Usa .border-primary, .border-success, .border-danger, .border-warning, .border-info, .border-light, .border-dark, o .border-white para estilizar el color del borde.
La demostración de CodePen a continuación muestra todos los diferentes tipos de tarjetas que podemos crear con Bootstrap. Siéntete libre de experimentar con ello por tu cuenta:
Creando diseños avanzados con el componente de tarjeta de Bootstrap
La tarjeta de Bootstrap es un componente de interfaz de usuario versátil ampliamente utilizado en diseños web modernos para mostrar tipos de contenido mixtos (como texto e imágenes) como una sola entidad o colecciones agrupadas.
Las tarjetas son especialmente útiles para el diseño responsivo y se implementan comúnmente en diseños como el diseño Masonry, también conocido como el diseño similar a Pinterest.
Las tarjetas se pueden utilizar para crear diseños para galerías de imágenes, publicaciones de blogs o productos de comercio electrónico. Plataformas importantes como Google y Facebook aprovechan ampliamente las tarjetas para organizar y mostrar contenido en sus aplicaciones web.
Anteriormente, construir diseños tan avanzados requería un profundo conocimiento de CSS y HTML. Sin embargo, con las últimas características de Bootstrap, los desarrolladores pueden crear diseños basados en tarjetas que son responsivos y visualmente atractivos sin esfuerzo.
Clases como .card-group, .card-deck y .card-columns simplifican el proceso de organizar tarjetas con un estilo y alineación consistentes.
Agrupando/Nidificando Tarjetas
Los grupos de tarjetas en Bootstrap son una manera eficiente de mostrar múltiples componentes de tarjeta como una sola entidad unida con ancho y alto uniformes.
Este diseño se logra utilizando la propiedad display: flex;, asegurando que todas las tarjetas se alineen perfectamente. Es particularmente útil para el diseño responsivo y diseños web modernos donde las dimensiones consistentes de las tarjetas son esenciales.
Para crear un grupo de tarjetas, utiliza la clase .card-group como un div contenedor que contenga tarjetas individuales.
A continuación, un ejemplo que muestra un grupo de tres tarjetas:
<div class="card-group">
<div class="card text-white">
<img class="card-img-top" src="https://source.unsplash.com/featured/" alt="Card image top">
<div class="card-img-overlay">
<div class="card-group">
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/475/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 1</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">This is an example of a grouped card.</p>
</div>
</div>
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/58/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 2</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">Grouped cards ensure uniform styling.</p>
</div>
</div>
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/75/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 3</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">They are responsive and visually appealing.</p>
</div>
</div>
</div>Esta es una captura de pantalla del resultado:
Como se puede ver, las tres cartas están adjuntas y tienen el mismo ancho y alto.
Barajas de cartas
En versiones anteriores de Bootstrap, se usaba .card-deck para crear diseños de cartas donde las cartas tenían el mismo ancho y alto pero no estaban adjuntas entre sí. Sin embargo, en Bootstrap 5, se recomienda utilizar el sistema de rejilla para este propósito. Este enfoque ofrece mayor flexibilidad y capacidad de respuesta.
Para lograr un diseño similar, utiliza la clase .row con .col para controlar el espaciado y alineación de las cartas. Aquí tienes un ejemplo:
<div class="row row-cols-1 row-cols-md-3 g-4">
Como podemos ver, las cartas son del mismo tamaño con un margen entre ellas.
Columnas de cartas
En versiones anteriores de Bootstrap, se usaba la clase .card-columns para crear un diseño tipo mampostería donde las cartas se agregaban de arriba hacia abajo y de izquierda a derecha. Sin embargo, en Bootstrap 5, esta característica ha sido eliminada.
Para lograr un diseño similar, puedes utilizar el sistema de rejilla en combinación con el diseño de mampostería en CSS o un plugin JavaScript como Masonry.js para comportamientos más complejos.
Aquí te mostramos cómo crear un diseño simple estilo mampostería utilizando el sistema de rejilla y CSS:
Optimización del rendimiento
Un rendimiento eficiente es crucial para crear cartas de Bootstrap que se carguen rápidamente y se adapten sin problemas. Aquí tienes técnicas prácticas para mejorar el rendimiento al integrar componentes de cartas de Bootstrap como div class card body y h5 class card title.
Carga diferida de imágenes
La carga perezosa retrasa la carga de imágenes hasta que sean visibles en el viewport, optimizando la velocidad de la página. Utiliza el atributo loading=”lazy” con card img top para una solución eficiente.
<img src="https://picsum.photos/300/200" loading="lazy" class="card-img-top" alt="Lazy Loaded Image">Optimizar tamaños de imagen
Redimensiona las imágenes para que se ajusten a las dimensiones de su contenedor, garantizando tiempos de carga más rápidos. Utiliza img-fluid con la clase div card img para escalar automáticamente las imágenes.
<img src="https://picsum.photos/300/200" class="card-img-top img-fluid" alt="Resized Image">Esto asegura que la imagen card img top encaje perfectamente, independientemente del ancho del elemento padre.
Minificar CSS y JavaScript
Minifica estilos y scripts para reducir los tamaños de archivo. Combina múltiples elementos de la clase div card header y minimiza el CSS personalizado para una renderización más rápida.
Ejemplo optimizado
En lugar de aplicar estilos repetitivos o personalizados como este:
<div class="card" style="border: 1px solid blue; text-align: center; padding: 20px;">
<div class="card-body">
<h5 style="font-size: 1.5rem; font-weight: bold;">Custom CSS Header</h5>
<p style="font-size: 1rem; color: #555;">This card uses inline styles, which are inefficient.</p>
</div>
</div>Utiliza las clases de utilidad de Bootstrap para una estructura más limpia y mantenible:
<div class="card border-primary text-center p-3">
<div class="card-body">
<h5 class="card-title text-uppercase fw-bold">Utility Classes Header</h5>
<p class="card-text text-secondary">Using Bootstrap's utility classes ensures better performance and maintainability.</p>
</div>
</div>Utiliza SVGs para iconos
Los SVGs son ligeros y escalables, lo que los hace ideales para encabezados de tarjetas y elementos decorativos. Se cargan más rápido y mantienen la nitidez en todos los dispositivos.
Ejemplo
<div class="card text-center">
<div class="card-header bg-success text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi bi-check-circle" fill="currentColor">
<path d="M16 8.98l.686-.688L7.733.011 6.023 1.72 14.98 10.676z"/>
</svg>
<h5 class="card-title">SVG Optimized Header</h5>
</div>
<div class="card-body">
<p class="card-text">SVGs provide clear visuals with minimal overhead.</p>
</div>
</div>Pre cargar y Prefetch recursos
Utiliza rel=”preload” para cargar recursos críticos y rel=”prefetch” para anticipar necesidades futuras. Esto es especialmente útil para contenidos de tarjetas pesados.
Ejemplo
<link rel="preload" href="https://example.com/styles.css" as="style">
<link rel="prefetch" href="https://example.com/next-page.html">Reducir la complejidad del DOM
Avoida estructuras de div anidadas en exceso que pueden ralentizar la renderización. Simplifica los diseños para optimizar el rendimiento.
Antes de la optimización
<div class="card">
<div class="card-body">
<div>
<div>
<p>Nested Content</p>
</div>
</div>
</div>
</div>Después de la optimización
<div class="card">
<div class="card-body">
<p class="card-text">Optimized Content</p>
</div>
</div>Optimizar Fuentes
Pre-cargue fuentes personalizadas o use fuentes del sistema para reducir la latencia. Un div limpio de la clase “card body” puede resaltar aún más el atractivo visual de tus tarjetas.
Ejemplo
<div class="card">
<div class="card-body" style="font-family: 'Roboto', sans-serif;">
<h5 class="card-title">Optimized Font</h5>
<p class="card-text">Preloading ensures faster rendering for card content.</p>
</div>
</div>Conclusión
El componente de tarjeta de Bootstrap es una adición poderosa al framework de Bootstrap, que permite a los desarrolladores crear páginas web con estilo moderno sin adentrarse profundamente en cómo funciona el CSS. Puedes añadir diseños de tarjetas para representar galerías de imágenes, widgets de panel de control y mostrar publicaciones de blog o productos para un sitio web de comercio electrónico mediante la adición de clases de CSS.
Como resultado de las nuevas características y componentes, Bootstrap sigue siendo un poderoso framework de CSS disponible para todos, especialmente para los desarrolladores que necesitan crear sus propios diseños receptivos y con estilo moderno pero que carecen de tiempo y presupuesto o del conocimiento profundo de CSS necesario para producir código personalizado.
Si ya tienes los conceptos básicos de Bootstrap dominados pero te preguntas cómo llevar tus habilidades de Bootstrap al siguiente nivel, echa un vistazo a nuestro curso “Construyendo Tu Primer Sitio Web con Bootstrap 4” para una introducción rápida y divertida al poder de Bootstrap.
Preguntas frecuentes sobre el dominio de los componentes de tarjeta de Bootstrap para el diseño receptivo
¿Qué es un componente de tarjeta de Bootstrap?
Un componente de tarjeta de Bootstrap es un contenedor moderno y flexible para contenido, que te permite crear diseños visualmente atractivos para texto, imágenes y multimedia. Las tarjetas son parte del marco de Bootstrap, diseñado para ayudar a los desarrolladores a organizar la información de manera receptiva y compatible con dispositivos móviles.
¿Cómo creo un componente de tarjeta de Bootstrap?
Crear un componente de tarjeta de Bootstrap es sencillo. Puedes usar un div con la clase card como contenedor y agregar contenido como títulos, texto e imágenes dentro de él. Aquí tienes un ejemplo:
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example of a Bootstrap card body.</p>
</div>
</div>¿Cómo establecer la altura y el ancho de una tarjeta en Bootstrap?
Puedes personalizar el ancho y la altura de la tarjeta de Bootstrap utilizando estilos en línea o las clases de utilidad de Bootstrap. Por ejemplo:
<div class="card" style="width: 20rem; height: 15rem;">
<div class="card-body">
<h5 class="card-title">Custom Card</h5>
<p class="card-text">This card has a custom height and width.</p>
</div>
</div>Alternativamente, también puedes usar clases de utilidad de altura de tarjeta de Bootstrap como w-50 o h-100 para establecer las dimensiones de la tarjeta de manera receptiva.
¿Cómo cambiar el tamaño de una tarjeta en Bootstrap?
Para cambiar el tamaño de una tarjeta, puedes usar clases de utilidad de tamaño de tarjeta de Bootstrap como w-25, w-50 o w-75 para el ancho, y h-auto o h-100 para la altura. Esto asegura que tu tarjeta se adapte al diseño sin necesidad de CSS adicional. Aquí tienes un ejemplo:
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Responsive Card</h5>
<p class="card-text">This card resizes based on its parent container.</p>
</div>
</div>¿Cómo creo un título de tarjeta en Bootstrap?
Para agregar un título a tu tarjeta, usa un elemento <h5> con la clase=”card-title”. Esta clase asegura que el título esté estilizado de manera consistente con los estándares de diseño de Bootstrap.
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example of a Bootstrap card with a title.</p>
</div>
</div>¿Cómo puedo usar la clase card-body en Bootstrap?
La clase card-body es una clase de utilidad que proporciona relleno y organiza el contenido dentro de una tarjeta de Bootstrap. Es el contenedor principal para el contenido de una tarjeta.
<div class="card">
<div class="card-body">
<h5 class="card-title">Using card-body</h5>
<p class="card-text">This is the content inside the card-body section.</p>
</div>
</div>¿Cómo arreglar el tamaño de la tarjeta de Bootstrap?
Para arreglar el tamaño de una tarjeta, aplica un ancho y alto específicos usando estilos en línea o clases de utilidad. Por ejemplo:
<div class="card" style="width: 250px; height: 300px;">
<img src="https://picsum.photos/250/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Fixed Size Card</h5>
<p class="card-text">This card has a fixed size for consistency.</p>
</div>
</div>¿Cómo ajustar el tamaño de la tarjeta en Bootstrap?
El tamaño de la tarjeta se puede ajustar dinámicamente usando las clases de utilidad de Bootstrap o CSS Grid. Aquí tienes un ejemplo de dimensionamiento de tarjeta receptivo:
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Adjustable size based on parent grid.</p>
</div>
</div>
</div>
</div>¿Puedo personalizar los fondos y bordes de las tarjetas de Bootstrap?
Sí, Bootstrap ofrece extensas clases de personalización. Utiliza bg-primary para colores de fondo y border-success para estilos de borde. Ejemplo:
<div class="card bg-info border-danger">
<div class="card-body">
<h5 class="card-title">Custom Background</h5>
<p class="card-text">This card has a custom background and border.</p>
</div>
</div>¿Cómo puedo usar imágenes con tarjetas?
Bootstrap soporta imágenes dentro de tarjetas usando card-img-top o card-img-bottom. Ejemplo:
<div class="card">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card with Image</h5>
<p class="card-text">This card includes a top image.</p>
</div>
</div>¿Cómo usar la clase div card body en Bootstrap?
La clase div card body en Bootstrap define el área de contenido principal dentro de una tarjeta. Proporciona relleno y asegura un espaciado consistente para texto, imágenes y otros elementos dentro de la tarjeta.
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is some text within a card body.</p>
</div>
</div>¿Qué es la clase p card text en Bootstrap?
La clase p card text en Bootstrap se utiliza para estilizar el contenido textual dentro del cuerpo de la tarjeta. Aplica estilos tipográficos predeterminados para que el texto se vea limpio y profesional.
<div class="card">
<div class="card-body">
<p class="card-text">This is an example of styled text inside a Bootstrap card.</p>
</div>
</div>¿Cómo aumentar el tamaño de la tarjeta en Bootstrap?
Para aumentar el tamaño de la tarjeta, ajusta su ancho y altura utilizando w-100 para ancho completo o especifica dimensiones usando estilos. Ejemplo:
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Large Card</h5>
<p class="card-text">This card has an increased size for visibility.</p>
</div>
</div>¿Cómo puedo hacer que las tarjetas tengan la misma altura?
Utiliza .d-flex y .align-items-stretch:
<div class="row g-3">
<div class="col-md-4 d-flex">
<div class="card flex-fill">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Aligned with others.</p>
</div>
</div>
</div>Source:
https://www.sitepoint.com/bootstrap-card-component-introduction/