{"id":7440,"date":"2019-08-29T08:04:57","date_gmt":"2019-08-29T08:04:57","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7440"},"modified":"2019-08-29T08:04:57","modified_gmt":"2019-08-29T08:04:57","slug":"como-definir-una-figura-con-bootstrap-4","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/como-definir-una-figura-con-bootstrap-4\/","title":{"rendered":"Como definir una figura con Bootstrap 4"},"content":{"rendered":"

En este art\u00edculo vas a averiguar como y cuando definir una figura, darle formato y algunos detalles m\u00e1s.<\/p>\n

Tambi\u00e9n vas a ver como mejorar el aspecto de estas figuras utilizando Bootstrap<\/strong>.<\/p>\n

El elemento HTML<\/strong> <figure> representa contenido independiente, a menudo con un t\u00edtulo, asociado a un texto principal.<\/p>\n

Por lo general, las figuras se suelen utilizar para incluir una imagen, una ilustraci\u00f3n, un diagrama, un fragmento de c\u00f3digo, o un esquema al que se puede hacer referencia en un texto principal.<\/p>\n

Dentro del elemento <figure> puedes incluir la etiqueta <figcaption> para agregar un t\u00edtulo asociado a la figura.<\/p>\n

Con Bootstrap<\/strong> puedes dar un poco de formato a estos elementos para que se vean m\u00e1s bonitos.<\/p>\n

Cada vez que necesites mostrar un contenido, como una imagen con un t\u00edtulo opcional, es buena idea utilizar el elemento <figure>.<\/p>\n

En Bootstrap<\/strong> puedes utilizar las clases definidas .figure , .figure-img y .figure-caption para proporcionar algunos estilos preparados para los elementos <figure> y <figcaption>. Tambi\u00e9n tienes la posibilidad de darle tu propio estilo, como cualquier otro elemento HTML<\/strong>.<\/p>\n

F\u00edjate en la siguiente estructura:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"col-lg-12"<\/span>><\/span>\n        <figure class<\/span>=<\/span>"figure"<\/span>><\/span>\n            <img<\/span><\/a> src<\/span>=<\/span>"https:\/\/picsum.photos\/id\/679\/1200\/300"<\/span> class<\/span>=<\/span>"figure-img img-fluid rounded"<\/span> alt<\/span>=<\/span>"A generic square placeholder image with rounded corners in a figure."<\/span>><\/span>\n            <figcaption class<\/span>=<\/span>"figure-caption"<\/span>><\/span>A caption for the above image.<\/<\/span>figcaption><\/span>\n        <\/<\/span>figure><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Donde estoy definiendo una nueva fila de doce columnas para mostrar una figura con su imagen y t\u00edtulo a la izquierda. El resultado ser\u00eda como la imagen siguiente:<\/p>\n
\"\"<\/a><\/p>\n
Indicando la clase \u00abimg-fluid\u00bb a la imagen, conseguimos que se adapte a todos los dispositivos de forma f\u00e1cil y agradable.<\/p>\n
Indicando la clase \u00abrounded\u00bb a la imagen, conseguimos que los bordes sean redondeados.<\/p>\n
El elemento <figure> tambi\u00e9n se puede utilizar para mostrar elementos con imagen y t\u00edtulo uno al lado del otro. Por ejemplo, podemos mostrar 3 figuras utilizando la grilla de Bootstrap<\/strong>:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span> \n    <div<\/span><\/a> class<\/span>=<\/span>"col-lg-4"<\/span>><\/span>\n        <figure class<\/span>=<\/span>"figure"<\/span>><\/span>\n            <img<\/span><\/a> src<\/span>=<\/span>"https:\/\/picsum.photos\/id\/680\/400\/300"<\/span> class<\/span>=<\/span>"figure-img img-fluid rounded"<\/span> alt<\/span>=<\/span>"A generic square placeholder image with rounded corners in a figure."<\/span>><\/span>\n            <figcaption class<\/span>=<\/span>"figure-caption text-right"<\/span>><\/span>A caption for the above image.<\/<\/span>figcaption><\/span>\n        <\/<\/span>figure><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"col-lg-4"<\/span>><\/span>\n        <figure class<\/span>=<\/span>"figure"<\/span>><\/span>\n            <img<\/span><\/a> src<\/span>=<\/span>"https:\/\/picsum.photos\/id\/681\/400\/300"<\/span> class<\/span>=<\/span>"figure-img img-fluid rounded"<\/span> alt<\/span>=<\/span>"A generic square placeholder image with rounded corners in a figure."<\/span>><\/span>\n            <figcaption class<\/span>=<\/span>"figure-caption text-right"<\/span>><\/span>A caption for the above image.<\/<\/span>figcaption><\/span>\n        <\/<\/span>figure><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"col-lg-4"<\/span>><\/span>\n        <figure class<\/span>=<\/span>"figure"<\/span>><\/span>\n            <img<\/span><\/a> src<\/span>=<\/span>"https:\/\/picsum.photos\/id\/682\/400\/300"<\/span> class<\/span>=<\/span>"figure-img img-fluid rounded"<\/span> alt<\/span>=<\/span>"A generic square placeholder image with rounded corners in a figure."<\/span>><\/span>\n            <figcaption class<\/span>=<\/span>"figure-caption text-right"<\/span>><\/span>A caption for the above image.<\/<\/span>figcaption><\/span>\n        <\/<\/span>figure><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Obteniendo como resultado:<\/p>\n
\"\"<\/a><\/p>\n
En este caso, estoy mostrando 3 figuras con su imagen y t\u00edtulo alineado a la derecha. El t\u00edtulo tambi\u00e9n se puede alinear f\u00e1cilmente al centro utilizando la clase \u00abtext-center\u00bb que tiene Bootstrap<\/strong> ya definida.<\/p>\n
En la mayor\u00eda de los casos, las figuras se suelen utilizar para acompa\u00f1ar un texto principal. F\u00edjate en la siguiente estructura:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span> \n    <div<\/span><\/a> class<\/span>=<\/span>"col-lg-8"<\/span>><\/span>\n        <p<\/span><\/a>><\/span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<\/<\/span>p<\/span><\/a>><\/span>\n        <p<\/span><\/a>><\/span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<\/<\/span>p<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"col-lg-4"<\/span>><\/span>\n        <figure class<\/span>=<\/span>"figure"<\/span>><\/span>\n            <img<\/span><\/a> src<\/span>=<\/span>"https:\/\/picsum.photos\/id\/683\/400\/300"<\/span> class<\/span>=<\/span>"figure-img img-fluid rounded"<\/span> alt<\/span>=<\/span>"A generic square placeholder image with rounded corners in a figure."<\/span>><\/span>\n            <figcaption class<\/span>=<\/span>"figure-caption text-right"<\/span>><\/span>A caption for the above image.<\/<\/span>figcaption><\/span>\n        <\/<\/span>figure><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Al definir esta estructura, estoy deseando mostrar un texto principal a la izquierda ocupando 8 columnas y la figura situada a la derecha ocupando 4 columnas.<\/p>\n
El resultado ser\u00eda como lo siguiente:<\/p>\n
\"\"<\/a><\/p>\n
Otro detalle interesante que se puede hacer con el elemento <figure> y, que seguramente habr\u00e1s visto por ah\u00ed, es posicionar su <figcaption> en posici\u00f3n absoluta por encima de la imagen para conseguir algo como lo siguiente:<\/p>\n
\"\"<\/a><\/p>\n
La estructura para conseguir esta figura es la siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"row"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"col-lg-12"<\/span>><\/span>\n        <figure class<\/span>=<\/span>"figure figure-container"<\/span>><\/span>\n            <img<\/span><\/a> src<\/span>=<\/span>"https:\/\/picsum.photos\/id\/679\/1200\/300"<\/span> class<\/span>=<\/span>"figure-img img-fluid rounded"<\/span> alt<\/span>=<\/span>"A generic square placeholder image with rounded corners in a figure."<\/span>><\/span>\n            <figcaption class<\/span>=<\/span>"figure-caption"<\/span>><\/span>A caption for the above image.<\/<\/span>figcaption><\/span>\n        <\/<\/span>figure><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
A nivel de estructura es lo mismo. Una peque\u00f1a diferencia es que al elemento <figure> le he agregado una clase \u00abfigure-container\u00bb que en la hoja de estilos CSS<\/strong> he definido con posici\u00f3n relativa y al t\u00edtulo con posici\u00f3n absoluta estableciendo su posici\u00f3n dentro de la imagen con los atributos top<\/em> y left<\/em>.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
.figure-container<\/span> {<\/span>\n    position<\/span>:<\/span> relative<\/span>;<\/span>\n}<\/span>\n \n.figure-container<\/span> .figure-caption<\/span> {<\/span>\n    position<\/span>:<\/span> absolute<\/span>;<\/span>\n    top<\/span>:<\/span> 40<\/span>%<\/span>;<\/span>\n    left<\/span>:<\/span> 5<\/span>%<\/span>;<\/span>\n    color<\/span>:<\/span> #ffffff<\/span>;<\/span>\n    font-size<\/span>:<\/span> 28px<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Conclusi\u00f3n<\/h3>\n
El elemento <figure> representa una pieza de documento autocontenido que se utiliza, habitualmente, para encerrar im\u00e1genes, gr\u00e1ficos, tablas de referencia, v\u00eddeos, poemas, fragmentos de c\u00f3digo, etc. Esto significa que, no est\u00e1 definido para usarlo solamente con im\u00e1genes, puedes agregar dentro del <figure> cualquier elemento HTML<\/strong>.<\/p>\n
De forma opcional, las figuras pueden ser acompa\u00f1adas por una leyenda o t\u00edtulo que puede usarse para hacer una referencia al fragmento desde alguna parte del documento.<\/p>\n
Este tipo de elementos, al ser autocontenido, significa que tiene cierto grado de independencia del contenido principal. Tambi\u00e9n se pueden utilizar como un elemento totalmente independiente.<\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Averigua cuando y como definir una figura en tu estructura HTML. Adem\u00e1s, mejora el aspecto de las figuras r\u00e1pidamente utilizando Bootstrap.<\/p>\n","protected":false},"author":1,"featured_media":7445,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[163],"class_list":["post-7440","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-bootstrap"],"yoast_head":"\nComo definir una figura con Bootstrap 4 - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Averigua cuando y como definir una figura en tu estructura HTML. Adem\u00e1s, mejora el aspecto de las figuras r\u00e1pidamente utilizando Bootstrap.\" \/>\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=\"Como definir una figura con Bootstrap 4 - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Averigua cuando y como definir una figura en tu estructura HTML. Adem\u00e1s, mejora el aspecto de las figuras r\u00e1pidamente utilizando Bootstrap.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/como-definir-una-figura-con-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=\"2019-08-29T08:04:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/08\/figuras-con-bootstrap-4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\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=\"6 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\/como-definir-una-figura-con-bootstrap-4\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/como-definir-una-figura-con-bootstrap-4\/\",\"name\":\"Como definir una figura con Bootstrap 4 - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-definir-una-figura-con-bootstrap-4\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-definir-una-figura-con-bootstrap-4\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/08\/figuras-con-bootstrap-4.png\",\"datePublished\":\"2019-08-29T08:04:57+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Averigua cuando y como definir una figura en tu estructura HTML. Adem\u00e1s, mejora el aspecto de las figuras r\u00e1pidamente utilizando Bootstrap.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-definir-una-figura-con-bootstrap-4\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/como-definir-una-figura-con-bootstrap-4\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-definir-una-figura-con-bootstrap-4\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/08\/figuras-con-bootstrap-4.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/08\/figuras-con-bootstrap-4.png\",\"width\":250,\"height\":250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-definir-una-figura-con-bootstrap-4\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como definir una figura con 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":"Como definir una figura con Bootstrap 4 - Jose Aguilar Blog","description":"Averigua cuando y como definir una figura en tu estructura HTML. Adem\u00e1s, mejora el aspecto de las figuras r\u00e1pidamente utilizando Bootstrap.","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":"Como definir una figura con Bootstrap 4 - Jose Aguilar Blog","og_description":"Averigua cuando y como definir una figura en tu estructura HTML. Adem\u00e1s, mejora el aspecto de las figuras r\u00e1pidamente utilizando Bootstrap.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/como-definir-una-figura-con-bootstrap-4\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2019-08-29T08:04:57+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/08\/figuras-con-bootstrap-4.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":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-definir-una-figura-con-bootstrap-4\/","url":"https:\/\/www.jose-aguilar.com\/blog\/como-definir-una-figura-con-bootstrap-4\/","name":"Como definir una figura con Bootstrap 4 - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-definir-una-figura-con-bootstrap-4\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-definir-una-figura-con-bootstrap-4\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/08\/figuras-con-bootstrap-4.png","datePublished":"2019-08-29T08:04:57+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Averigua cuando y como definir una figura en tu estructura HTML. Adem\u00e1s, mejora el aspecto de las figuras r\u00e1pidamente utilizando Bootstrap.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-definir-una-figura-con-bootstrap-4\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/como-definir-una-figura-con-bootstrap-4\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-definir-una-figura-con-bootstrap-4\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/08\/figuras-con-bootstrap-4.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/08\/figuras-con-bootstrap-4.png","width":250,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-definir-una-figura-con-bootstrap-4\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Como definir una figura con 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\/7440","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=7440"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7440\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7445"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}