CARDS COMPONENTE EN BOOTSTRAP 4

Cards o tarjetas es un contenedor de contenido flexible y extensible. Incluye opciones para encabezados y pies de página, una amplia variedad de contenido, colores de fondo contextuales y opciones de visualización potentes.

Si está familiarizado con Bootstrap 3, las cards reemplazan a panels, wells, y thumbnails. La funcionalidad es similar a esos componentes que están disponible como clases modificadoras para cards.

Card layout

Utilice grupos de cards para representar las cards como un solo elemento adjunto con columnas de anchura y altura iguales. Los grupos de cards utilizan display:flex; para lograr su tamaño uniforme <div class="card-group"<
<div class="card"<
<img class="card-img-top" src="..." alt="Card image cap"<
<div class="card-block"<
<h4 class="card-title"<Titulo de Card</h4<
<p class="card-text"<Ésta es una tarjeta más ancha con el texto de apoyo abajo como entrada natural al contenido adicional. Este contenido es un poco más largo.</p<
<p class="card-text"<<small class="text-muted"<Última actualización hace 3 minutos</small<</p<
</div<
</div<
<div class="card"<
<img class="card-img-top" src="..." alt="Card image cap"<
<div class="card-block"<
<h4 class="card-title"<Titulo de Card</h4<
<p class="card-text"<Esta tarjeta tiene el texto de apoyo a continuación como un lead-in natural a contenido adicional.</p<
<p class="card-text"<<small class="text-muted"<Última actualización hace 3 minutos</small<</p<
</div<
</div<
<div class="card"<
<img class="card-img-top" src="..." alt="Card image cap"<
<div class="card-block"<
<h4 class="card-title"<Titulo de Card</h4<
<p class="card-text"<Ésta es una tarjeta más ancha con el texto de apoyo abajo como entrada natural al contenido adicional. Esta tarjeta tiene un contenido aún más largo que el primero para mostrar que la acción de altura igual.</p<
<p class="card-text"<<small class="text-muted"<Última actualización hace 3 minutos</small<</p<
</div<
</div<
</div<

Estilos de Card

Las cards incluyen varias opciones para personalizar sus fondos, bordes y color.

De forma predeterminada, las cards utilizan texto oscuro y asumen un fondo claro. Usted puede invertir eso cambiando el color del texto dentro, así como el de los subcomponentes de la tarjeta, con .card-inverse. A continuación, especifique un background-color oscuro y un border-color para ir con él.

También puede utilizar .card-inverse con las variantes contextuales de fondos

<div class="card card-inverse" style="background-color: #333; border-color: #333;"<
<div class="card-block"<
<h3 class="card-title"<Special title treatment</h3<
<p class="card-text"<Con el texto de apoyo a continuación, como una introducción natural al contenido adicional.</p<
<a href="#" class="btn btn-primary"<Ve a algún lugar
</a<
</div<
</div<

Tipos de contenidos

Las cards admiten una amplia variedad de contenido, incluyendo imágenes, texto, grupos de listas, enlaces y más. A continuación se muestran ejemplos de lo que se admite

Blocks

El bloque de construcción de una cards es el .card-block. Úselo siempre que necesite una sección acolchada dentro de una tarjeta.

Ejemplo de Blocks

<div class="card"<
<div class="card-block">Este es un texto dentro de un bloque de tarjetas.</div<
</div<

Titulos, textos y links

Los títulos de las cards se utilizan añadiendo .card-title a una etiqueta <h*<. De la misma manera, los enlaces se agregan y colocan uno junto al otro añadiendo .card-link a una etiqueta <a<.

Los subtítulos se usan añadiendo un subtítulo .card-subtitle a una etiqueta <h *<. Si los elementos .card-title y .card-subtitle se colocan en un elemento .card-block, el título de la tarjeta y el subtítulo están bien alineados.

Ejemplo de Subtitulo

<div class="card"<
<div class="card-block"<
<h4 class="card-title"<Titulo de la tarjeta</h4<
<h6 class="card-subtitle mb-2 text-muted"<Subtitulo de la tarjeta</h6<
<p class="card-text"<Algunos ejemplos rápidos de texto para construir sobre el título de la tarjeta y componen la mayor parte del contenido de la tarjeta.</p<
<a href="#" class="card-link"<Card link</a<
<a href="#" class="card-link"<Another link</a<
</div<
</div<

Imagenes

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

Ejemplo de Imagenes

<div class="card"<
<img class="card-img-top" src="..." alt="Card imagen"<
<div class="card-block"<
<p class="card-text"<Ejemplos rápidos de texto para construir sobre el título de la tarjeta y componen la mayor parte del contenido de la tarjeta.</p<
</div<
</div<

Lista de grupos

Crear una lista de contenido en una tarjeta con un grupo de lista de color.

Ejemplo de lista de grupos

<div class="card"<
<ul class="list-group list-group-flush"<
<li class="list-group-item"<Opcion 1</li<
<li class="list-group-item"<Opcion 2</li<
<li class="list-group-item"<Opcion 3</li<
</ul<
</div<

Kitchen sink

Mezcla y combina varios tipos de contenido para crear la tarjeta que necesitas. A continuación se muestran image styles, blocks, text styles, y list group—all wrapped en fixed-width card., todos ellos envueltos en una tarjeta de ancho fijo.

Ejemplo de Kitchen sink

<div class="card" style="width:20rem;"<
<img class="card-img-top" src="..." alt="Card image cap"<
<div class="card-block"<
<h4 class="card-title"<Card title</h4<
<p class="card-text"<Algunos ejemplos rápidos de texto para construir sobre el título de la tarjeta y componen la mayor parte del contenido de la tarjeta.</p<
</div<
<ul class="list-group list-group-flush"<
<li class="list-group-item"<Opcion 1</li<
<li class="list-group-item"<Opcion 2</li<
<li class="list-group-item"<Opcion 3</li<
</ul<
<div class="card-block"<
<a href="#" class="card-link"<Link de tarjeta</a<
<a href="#" class="card-link"<Otro enlace</a<
</div<
</div<

Usando grid markup

Usando la cuadrícula, envuelva las tarjetas en columnas y filas según sea necesario.

Ejemplo de grid markup

<div class="row"><div class="col-sm-6"< <div class="card"<<div class="card-block"< <h3 class="card-title"<Titulo Especial</h3< <p class="card-text"<Texto de relleno.</p< <a href="#" class="btn btn-primary"<Go somewhere</a< </div<</div<</div< <div class="col-sm-6"<<div class="card"<<div class="card-block"< <h3 class="card-title"<Titulo especial</h3< <p class="card-text"<Texto de relleno.</p< <a href="#" class="btn btn-primary"<Ir</a< </div<</div<</div<</div<
Fecha actualización el 2021-10-26. Fecha publicación el 2017-10-26. Categoría: Bootstrap. Autor: Oscar olg Mapa del sitio
componente Cards