{"id":7718,"date":"2022-04-13T06:02:38","date_gmt":"2022-04-13T06:02:38","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7718"},"modified":"2022-04-13T06:05:14","modified_gmt":"2022-04-13T06:05:14","slug":"tarjetas-de-presentacion-cards-en-bootstrap-4","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/tarjetas-de-presentacion-cards-en-bootstrap-4\/","title":{"rendered":"Tarjetas de presentaci\u00f3n (cards) en Bootstrap 4"},"content":{"rendered":"

Las cards o tarjetas de presentaci\u00f3n son un recurso de Bootstrap<\/strong> que suelo utilizar muy a menudo ya que la informaci\u00f3n que puede mostrar queda muy bien organizada y puede servir para cualquier tipo de contenido.<\/p>\n

Las tarjetas de Bootstrap<\/strong> brindan un contenedor de contenido flexible y extensible con m\u00faltiples variantes y opciones que no puedes pasar por alto.<\/p>\n

Las cards<\/em> de Bootstrap<\/strong> incluyen opciones para encabezados y pies de p\u00e1gina, una amplia variedad de contenido, colores de fondo contextuales y potentes opciones de visualizaci\u00f3n.<\/p>\n

Si est\u00e1s familiarizado con Bootstrap 3, las tarjetas reemplazan los viejos paneles, pozos y miniaturas. Una funcionalidad similar a esos componentes est\u00e1 disponible como clases de modificadores para tarjetas.<\/p>\n

Por ejemplo: Las tarjetas se construyen con la menor cantidad de etiquetas y estilos posible, pero aun as\u00ed logran ofrecer una tonelada de control y personalizaci\u00f3n.<\/p>\n

Construidos con flexbox<\/strong>, ofrecen una f\u00e1cil alineaci\u00f3n y se combinan bien con otros componentes de Bootstrap.<\/p>\n

No tienen margen por defecto, pero esto no es un problema sabiendo que puedes usar las utilidades de espaciado seg\u00fan sea necesario.<\/p>\n

Tipos de contenido<\/span><\/span><\/h2>\n

Las tarjetas admiten una amplia variedad de contenido, incluidas im\u00e1genes, texto, grupos de listas, enlaces y m\u00e1s.<\/span><\/span><\/p>\n

A continuaci\u00f3n se muestran ejemplos de lo que se admite.<\/span><\/span><\/p>\n

Cuerpo de la tarjeta<\/h3>\n

La expresi\u00f3n\u00a0 m\u00ednima de una tarjeta es el cuerpo o \u00abcard-body\u00bb.<\/p>\n

En Bootstrap, el bloque de construcci\u00f3n de una tarjeta es el .card-body.<\/p>\n

Puedes usarlo siempre que necesites una secci\u00f3n acolchada dentro de una tarjeta.<\/p>\n

Ejemplo:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<<\/span>div class<\/span>=<\/span>"card"<\/span>><\/span>\n    <<\/span>div class<\/span>=<\/span>"card-body"<\/span>><\/span>Lorem ipsum...<\/<\/span>div><\/span>\n<\/<\/span>div><\/span><\/pre><\/div><\/div>\n
Para conseguir como resultado:<\/p>\n
\"card-body\"<\/p>\n
T\u00edtulos, texto y enlaces en el cuerpo de una tarjeta<\/h3>\n
Los t\u00edtulos de las tarjetas se usan agregando .card-title a una etiqueta <h*>.<\/p>\n
De la misma manera, los enlaces se agregan y colocan uno al lado del otro agregando .card-link a una etiqueta <a>.<\/p>\n
Los subt\u00edtulos se usan agregando un .card-subtitle a una etiqueta <h*>.<\/p>\n
Si los elementos .card-title y .card-subtitle se colocan en un elemento .card-body, el t\u00edtulo y el subt\u00edtulo de la tarjeta se alinear\u00e1n correctamente.<\/p>\n
Ejemplo completo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"card mb-3"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"card-body"<\/span>><\/span>\n        <h5<\/span><\/a> class<\/span>=<\/span>"card-title"<\/span>><\/span>Card title<\/<\/span>h5<\/span><\/a>><\/span>\n        <h6<\/span><\/a> class<\/span>=<\/span>"card-subtitle mb-2 text-muted"<\/span>><\/span>Card subtitle<\/<\/span>h6<\/span><\/a>><\/span>\n        <p<\/span><\/a> class<\/span>=<\/span>"card-text"<\/span>><\/span>Some quick example text to build on the card title and make up the bulk of the card's content.<\/<\/span>p<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> class<\/span>=<\/span>"card-link"<\/span>><\/span>Card link<\/<\/span>a<\/span><\/a>><\/span>\n        <a<\/span><\/a> href<\/span>=<\/span>"#"<\/span> class<\/span>=<\/span>"card-link"<\/span>><\/span>Another link<\/<\/span>a<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Y as\u00ed podemos obtener lo siguiente:<\/p>\n
\"card-body-complete\"<\/p>\n
Cabecera y pie de p\u00e1gina de una tarjeta<\/h3>\n
Al cuerpo de una tarjeta se le puede anidar dos contenedores para armar una cabecera y\/o pie de p\u00e1gina.<\/p>\n
Por ejemplo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"card"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"card-header"<\/span>><\/span>Lorem ipsum<\/<\/span>div<\/span><\/a>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"card-body"<\/span>><\/span>Lorem ipsum dolor sit amet consectetur, adipisicing elit.<\/<\/span>div<\/span><\/a>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"card-footer text-muted"<\/span>><\/span>09\/04\/2022<\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Par obtener como resultado:<\/p>\n
\"card-header-body-footer\"<\/p>\n
Imagen de cabecera en la tarjeta<\/h3>\n
.card-img-top coloca una imagen en la parte superior de la tarjeta.<\/p>\n
Con .card-text, se puede agregar texto a la tarjeta. El texto dentro de .card-text tambi\u00e9n se puede dise\u00f1ar con las etiquetas HTML<\/strong> est\u00e1ndar.<\/p>\n
F\u00edjate en la siguiente estructura HTML:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"card"<\/span> style<\/span>=<\/span>"width: 18rem;"<\/span>><\/span>\n    <img<\/span><\/a> src<\/span>=<\/span>"img\/city.jpg"<\/span> class<\/span>=<\/span>"card-img-top"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"card-body"<\/span>><\/span>\n      <p<\/span><\/a> class<\/span>=<\/span>"card-text"<\/span>><\/span>Some quick example text to build on the card title and make up the bulk of the card's content.<\/<\/span>p<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Dentro de .card es donde colocamos la imagen con .card-img-top para obtener como resultado:<\/p>\n
\"card-img-top\"<\/p>\n
Con .card-img-bottom puedes agregar una imagen en el pie de p\u00e1gina de la tarjeta.<\/p>\n
El c\u00f3digo HTML ser\u00eda el siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"card mb-3"<\/span> style<\/span>=<\/span>"width: 18rem;"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"card-body"<\/span>><\/span>\n      <p<\/span><\/a> class<\/span>=<\/span>"card-text"<\/span>><\/span>Some quick example text to build on the card title and make up the bulk of the card's content.<\/<\/span>p<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n    <img<\/span><\/a> src<\/span>=<\/span>"img\/city.jpg"<\/span> class<\/span>=<\/span>"card-img-bottom"<\/span>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Resultado:<\/p>\n
\"card-img-bottom\"<\/p>\n
Superposiciones de im\u00e1genes<\/h3>\n
Convierte una imagen en el fondo de la tarjeta y superp\u00f3n el texto de su tarjeta.<\/p>\n
Dependiendo de la imagen, es posible que necesite o no estilos o utilidades adicionales.<\/p>\n
Ejemplo HTML:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"card bg-dark text-white mb-3"<\/span>><\/span>\n    <img<\/span><\/a> src<\/span>=<\/span>"img\/city.jpg"<\/span> class<\/span>=<\/span>"card-img"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"card-img-overlay"<\/span>><\/span>\n        <h5<\/span><\/a> class<\/span>=<\/span>"card-title"<\/span>><\/span>Card title<\/<\/span>h5<\/span><\/a>><\/span>\n        <p<\/span><\/a> class<\/span>=<\/span>"card-text"<\/span>><\/span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<\/<\/span>p<\/span><\/a>><\/span>\n        <p<\/span><\/a> class<\/span>=<\/span>"card-text"<\/span>><\/span>Last updated 3 mins ago<\/<\/span>p<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
 <\/p>\n
Para conseguir como resultado:<\/p>\n
\"image-overlay\"<\/p>\n
Tarjeta horizontal<\/h3>\n
Usando una combinaci\u00f3n de cuadr\u00edcula y clases de utilidad, las tarjetas se pueden hacer horizontales de una manera receptiva y compatible con dispositivos m\u00f3viles.<\/p>\n
C\u00f3digo de marcado:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"card mb-3"<\/span> style<\/span>=<\/span>"max-width: 100%;"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"row no-gutters"<\/span>><\/span>\n      <div<\/span><\/a> class<\/span>=<\/span>"col-md-4"<\/span>><\/span>\n        <img<\/span><\/a> class<\/span>=<\/span>"img-fluid"<\/span> src<\/span>=<\/span>"img\/city.jpg"<\/span>><\/span>\n      <\/<\/span>div<\/span><\/a>><\/span>\n      <div<\/span><\/a> class<\/span>=<\/span>"col-md-8"<\/span>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"card-body"<\/span>><\/span>\n          <h5<\/span><\/a> class<\/span>=<\/span>"card-title"<\/span>><\/span>Card title<\/<\/span>h5<\/span><\/a>><\/span>\n          <p<\/span><\/a> class<\/span>=<\/span>"card-text"<\/span>><\/span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<\/<\/span>p<\/span><\/a>><\/span>\n          <p<\/span><\/a> class<\/span>=<\/span>"card-text"<\/span>><small<\/span><\/a> class<\/span>=<\/span>"text-muted"<\/span>><\/span>Last updated 3 mins ago<\/<\/span>small<\/span><\/a>><\/<\/span>p<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n      <\/<\/span>div<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Y el resultado es el siguiente:<\/p>\n
\"card-horizontal\"<\/p>\n
Grupos de listas<\/h3>\n
Crear listas de contenido en una tarjeta con un grupo de listas es muy sencillo tambi\u00e9n.<\/p>\n
Observa el siguiente c\u00f3digo de marcado:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"card"<\/span> style<\/span>=<\/span>"width: 18rem;"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"card-header"<\/span>><\/span>\n      Grupo de lista\n    <\/<\/span>div<\/span><\/a>><\/span>\n    <ul<\/span><\/a> class<\/span>=<\/span>"list-group list-group-flush"<\/span>><\/span>\n        <li<\/span><\/a> class<\/span>=<\/span>"list-group-item"<\/span>><\/span>Item 1<\/<\/span>li<\/span><\/a>><\/span>\n        <li<\/span><\/a> class<\/span>=<\/span>"list-group-item"<\/span>><\/span>Item 2<\/<\/span>li<\/span><\/a>><\/span>\n        <li<\/span><\/a> class<\/span>=<\/span>"list-group-item"<\/span>><\/span>Item 3<\/<\/span>li<\/span><\/a>><\/span>\n    <\/<\/span>ul<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Para obtener:<\/p>\n
\"card-group-list\"<\/p>\n
Estilos adicionales para la tarjeta<\/h2>\n
Las tarjetas incluyen varias opciones para personalizar sus fondos, bordes y colores.<\/p>\n
Fondo y color<\/h3>\n
Usa las utilidades de texto y fondo para cambiar la apariencia de una tarjeta.<\/p>\n
Para conseguir una tarjeta con fondo de color primario puedes hacer agregar la clase .bg-primary a tu tarjeta:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"card text-white bg-primary mb-3"<\/span> style<\/span>=<\/span>"max-width: 18rem;"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"card-header"<\/span>><\/span>Header<\/<\/span>div<\/span><\/a>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"card-body"<\/span>><\/span>\n        <h5<\/span><\/a> class<\/span>=<\/span>"card-title"<\/span>><\/span>Primary card title<\/<\/span>h5<\/span><\/a>><\/span>\n        <p<\/span><\/a> class<\/span>=<\/span>"card-text"<\/span>><\/span>Some quick example text to build on the card title and make up the bulk of the card's content.<\/<\/span>p<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Como ya sabes, en Bootstrap puedes usar distintos colores que ya tienes preestablecidos:<\/p>\n
\"bg-color-card\"<\/p>\n
Bordes para las tarjetas<\/h3>\n
Con Bootstrap puedes usar las utilidades de borde para cambiar solo el color del borde de una tarjeta.<\/p>\n
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\u00f3n:<\/p>\n
\"card-border-primary\"<\/p>\n
Con la siguiente estructura se consigue:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"card border-primary mb-3"<\/span> style<\/span>=<\/span>"max-width: 18rem;"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"card-header"<\/span>><\/span>Header<\/<\/span>div<\/span><\/a>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"card-body text-primary"<\/span>><\/span>\n        <h5<\/span><\/a> class<\/span>=<\/span>"card-title"<\/span>><\/span>Primary card title<\/<\/span>h5<\/span><\/a>><\/span>\n        <p<\/span><\/a> class<\/span>=<\/span>"card-text"<\/span>><\/span>Some quick example text to build on the card title and make up the bulk of the card's content.<\/<\/span>p<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n
Conclusiones<\/h2>\n
Puedo asegurar que las tarjetas de presentaci\u00f3n o cards<\/em> son uno de los recursos de Bootstrap<\/strong> que m\u00e1s he utilizado en mis proyectos.<\/p>\n
Tanto es as\u00ed, que podr\u00e1s observar que en este mismo blog las estoy utilizando para mostrar el contenido de una entrada y en el sitio de demostraci\u00f3n tambi\u00e9n para mostrar el cuerpo de la demo.<\/p>\n","protected":false},"excerpt":{"rendered":"
Muestra contenido en un tarjeta o bloque de presentaci\u00f3n (cards) destacando sus caracter\u00edsticas principales.<\/p>\n","protected":false},"author":1,"featured_media":7736,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[163],"class_list":["post-7718","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-bootstrap"],"yoast_head":"\nTarjetas de presentaci\u00f3n (cards) en Bootstrap 4 - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Muestra contenido en un tarjeta o bloque de presentaci\u00f3n (cards) destacando sus caracter\u00edsticas principales.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tarjetas de presentaci\u00f3n (cards) en Bootstrap 4 - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Muestra contenido en un tarjeta o bloque de presentaci\u00f3n (cards) destacando sus caracter\u00edsticas principales.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/tarjetas-de-presentacion-cards-en-bootstrap-4\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-13T06:02:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-13T06:05:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/Bootstrap-4-Cards-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tarjetas-de-presentacion-cards-en-bootstrap-4\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/tarjetas-de-presentacion-cards-en-bootstrap-4\/\",\"name\":\"Tarjetas de presentaci\u00f3n (cards) en Bootstrap 4 - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tarjetas-de-presentacion-cards-en-bootstrap-4\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tarjetas-de-presentacion-cards-en-bootstrap-4\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/Bootstrap-4-Cards-1.png\",\"datePublished\":\"2022-04-13T06:02:38+00:00\",\"dateModified\":\"2022-04-13T06:05:14+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Muestra contenido en un tarjeta o bloque de presentaci\u00f3n (cards) destacando sus caracter\u00edsticas principales.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tarjetas-de-presentacion-cards-en-bootstrap-4\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/tarjetas-de-presentacion-cards-en-bootstrap-4\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tarjetas-de-presentacion-cards-en-bootstrap-4\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/Bootstrap-4-Cards-1.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/Bootstrap-4-Cards-1.png\",\"width\":500,\"height\":500,\"caption\":\"Bootstrap 4 - Cards\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/tarjetas-de-presentacion-cards-en-bootstrap-4\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tarjetas de presentaci\u00f3n (cards) en Bootstrap 4\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tarjetas de presentaci\u00f3n (cards) en Bootstrap 4 - Jose Aguilar Blog","description":"Muestra contenido en un tarjeta o bloque de presentaci\u00f3n (cards) destacando sus caracter\u00edsticas principales.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Tarjetas de presentaci\u00f3n (cards) en Bootstrap 4 - Jose Aguilar Blog","og_description":"Muestra contenido en un tarjeta o bloque de presentaci\u00f3n (cards) destacando sus caracter\u00edsticas principales.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/tarjetas-de-presentacion-cards-en-bootstrap-4\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2022-04-13T06:02:38+00:00","article_modified_time":"2022-04-13T06:05:14+00:00","og_image":[{"width":500,"height":500,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/Bootstrap-4-Cards-1.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/tarjetas-de-presentacion-cards-en-bootstrap-4\/","url":"https:\/\/www.jose-aguilar.com\/blog\/tarjetas-de-presentacion-cards-en-bootstrap-4\/","name":"Tarjetas de presentaci\u00f3n (cards) en Bootstrap 4 - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/tarjetas-de-presentacion-cards-en-bootstrap-4\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/tarjetas-de-presentacion-cards-en-bootstrap-4\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/Bootstrap-4-Cards-1.png","datePublished":"2022-04-13T06:02:38+00:00","dateModified":"2022-04-13T06:05:14+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Muestra contenido en un tarjeta o bloque de presentaci\u00f3n (cards) destacando sus caracter\u00edsticas principales.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/tarjetas-de-presentacion-cards-en-bootstrap-4\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/tarjetas-de-presentacion-cards-en-bootstrap-4\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/tarjetas-de-presentacion-cards-en-bootstrap-4\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/Bootstrap-4-Cards-1.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/04\/Bootstrap-4-Cards-1.png","width":500,"height":500,"caption":"Bootstrap 4 - Cards"},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/tarjetas-de-presentacion-cards-en-bootstrap-4\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tarjetas de presentaci\u00f3n (cards) en Bootstrap 4"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7718"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7718\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7736"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}