{"id":19756,"date":"2024-05-31T13:00:00","date_gmt":"2024-05-31T11:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=19756"},"modified":"2024-06-18T14:25:26","modified_gmt":"2024-06-18T12:25:26","slug":"como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\/","title":{"rendered":"C\u00f3mo usar strechted link y c\u00f3mo crear el nuestro sin Boostrap 5"},"content":{"rendered":"\n<p>\u00bfQuieres saber <strong>c\u00f3mo usar <em>strecheted link<\/em><\/strong> en <a href=\"https:\/\/carontestudio.com\/diseno-web\/diseno-web-vitoria\/\">el dise\u00f1o de tu web <\/a>y c\u00f3mo crear uno sin la necesidad de utilizar <a href=\"https:\/\/carontestudio.com\/blog\/novedades-de-bootstrap-5\/\">Bootstrap 5<\/a>? Qu\u00e9date y sigue leyendo porque aqu\u00ed veremos c\u00f3mo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Qu\u00e9 hace stretched link<\/h2>\n\n\n\n<p>La clase de Bootstrap stretched link <strong>expande el enlace hasta ocupar el contenido del elemento padre<\/strong>, y se sobrepone a dicho elemento, <strong>haciendo clicable todo el \u00e1rea<\/strong>. De manera que al hacer clic nos dar\u00e1 ese efecto de hacer clic dentro del propio enlace.<\/p>\n\n\n\n<p>Poni\u00e9ndonos un poco m\u00e1s t\u00e9cnicos, Bootstrap a\u00f1ade un pseudo-elemento <code>::after<\/code> al elemento con la clase \u00ab<code>stretched-link<\/code>\u00ab.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo usar stretched link<\/h2>\n\n\n\n<p>Usaremos <em>stretched link<\/em> cuando queramos que un contenedor que contenga un enlace dentro sea completamente clicable, convirtiendo a este en enlace tambi\u00e9n. Un ejemplo ilustrativo ser\u00eda una tarjeta que queramos usar para una entrada del blog, donde el t\u00edtulo de la entrada sea el enlace, pero queramos que la tarjeta entera sea clicable:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"820\" height=\"568\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image.png\" alt=\"C\u00f3mo usar stretched link\" class=\"wp-image-19809\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image.png 820w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-300x208.png 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-768x532.png 768w\" sizes=\"auto, (max-width: 820px) 100vw, 820px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"571\" height=\"170\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-1.png\" alt=\"C\u00f3mo usar stretched link\" class=\"wp-image-19810\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-1.png 571w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/image-1-300x89.png 300w\" sizes=\"auto, (max-width: 571px) 100vw, 571px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>Podr\u00eda tambi\u00e9n darse el caso donde simplemente queremos que el elemento sea clicable tambi\u00e9n en una zona donde de por s\u00ed no lo es, expandiendo el \u00e1rea donde se puede hacer clic, este es el ejemplo con el cual vamos a crear nuestro propio <em>stretched link<\/em> a continuaci\u00f3n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo creo mi propio stretched link<\/h2>\n\n\n\n<p>En algunos casos, se puede dar que no dispongamos del <em>framework <\/em>de Bootstrap, bien porque no nos interesa, porque no tenemos la posibilidad al usar componentes de otro tipo e incluso plugins o temas de <em>WordPress <\/em>o bien porque directamente no hemos usado nunca Bootstrap y no vamos a empezar a hacerlo para usar esto. As\u00ed que por qu\u00e9 no crearlo nosotros. Vamos a ello:<\/p>\n\n\n\n<p>En este tenemos un <em>plugin <\/em>de filtros, el cual trae un <em>checkbox<\/em>, con el siguiente problema, al hacer clic en el <em>checkbox <\/em>se marca y se desmarca, pero no genera la petici\u00f3n <em>GET <\/em>que actualizar\u00eda los productos de la p\u00e1gina, esta petici\u00f3n se genera al hacer clic en el enlace.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"219\" height=\"227\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/04\/image-1.png\" alt=\"C\u00f3mo creo mi propio stretched link\" class=\"wp-image-19757\"\/><\/figure>\n\n\n\n<p>La soluci\u00f3n que el checkbox forme parte del enlace, ya que al obtener a trav\u00e9s del <em>GET<\/em>, valor de la variable como <em>TRUE <\/em>el <em>checkbox <\/em>aparezce con su \u2611.<\/p>\n\n\n\n<p>Esta parece una buena ocasi\u00f3n para usar un <code>stretchec link<\/code>, pero se trata de un <em>plugin <\/em>de <em>WordPress <\/em>de terceros y en este caso tendr\u00edamos que tocar la plantilla <em>PHP <\/em>de dicho <em>plugin<\/em>. As\u00ed que nos dejamos de a\u00f1adir clases de Bootstrap y vamos a crear el <code>stretched link<\/code>.<\/p>\n\n\n\n<p>Como para esto vamos a necesitar que est\u00e9 en un pseudolemento, hay que decirle al elemento que lo va a contener que no tenga como <code>position: static; <\/code>as\u00ed que:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>a.term-label {\n    position: relative;\n}\n<\/code><\/pre>\n\n\n\n<p>as\u00ed una vez hecho esto, creamos el pseudoelemento, en este caso un <code>::after<\/code> como el de Bootstrap:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>a.term-label::after {\n    content: \"\";\n    position: absolute;\n    inset: 0 0 0 -1.5rem;\n    z-index: 1;\n}\n<\/code><\/pre>\n\n\n\n<p>Vamos a echar un ojo a ver qu\u00e9 hemos escrito. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>content: <\/strong>tiene que estar definido para que el pseudo-elemento se muestre, si contenido no habr\u00e1 pseudo-elemento.<\/li>\n\n\n\n<li><strong>position: absolute<\/strong>. Para darle posici\u00f3n respecto al elemento que lo contenga.<\/li>\n\n\n\n<li><strong>z-index: 1. <\/strong>Para que est\u00e9 por encima y sea este el que interactue al hacer clic.<\/li>\n\n\n\n<li><strong>inset: 0 0 0 -1.5rem<\/strong>. Con esto fijaremos<em> top, right<\/em> y <em>bottom <\/em>a 0. Y <em>left <\/em>a <em>-1.5rem<\/em> para cubrir el checkbox.<\/li>\n<\/ul>\n\n\n\n<p>Y con esto al hacer clic en el <em>checkbox <\/em>ya estar\u00edamos clicando en el enlace, por supuesto no directamente, el clic ir\u00eda en al pseudoelemento.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"269\" height=\"161\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/04\/image-2.png\" alt=\"C\u00f3mo creo mi propio stretched link\" class=\"wp-image-19758\"\/><\/figure>\n\n\n\n<p>Despu\u00e9s del clic:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"235\" height=\"52\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/04\/image-3.png\" alt=\"C\u00f3mo creo mi propio stretched link\" class=\"wp-image-19759\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Despedida<\/h2>\n\n\n\n<p>Este art\u00edculo nos ha llevado a comprender tanto el prop\u00f3sito como la implementaci\u00f3n de<code> stretched-link<\/code>, una caracter\u00edstica de Bootstrap que expande un enlace para abarcar todo el contenido de su elemento contenedor. Hemos aprendido c\u00f3mo utilizar <code>stretched-link<\/code> para hacer que elementos como tarjetas sean completamente clicables, as\u00ed como c\u00f3mo crear nuestra propia versi\u00f3n sin depender de Bootstrap. Esta soluci\u00f3n se vuelve especialmente \u00fatil en casos como la integraci\u00f3n de <em>plugins <\/em>de terceros en plataformas como <em>WordPress<\/em>, donde modificar la plantilla puede no ser una opci\u00f3n viable.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo hablamos de la clase \u00abstretched link\u00bb de Bootstrap, que convierte todo un contenedor en un enlace clicable, expandiendo el \u00e1rea de clic. Aprende a usar esta clase para hacer tarjetas de blog completamente interactivas y descubre c\u00f3mo crear tu propia versi\u00f3n sin Bootstrap. No te pierdas estos trucos esenciales para mejorar la usabilidad de tu sitio web y atraer m\u00e1s clics de tus usuarios. \u00a1Haz que cada parte de tu contenido cuente!<\/p>\n","protected":false},"author":18,"featured_media":19837,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[94],"tags":[93],"class_list":["post-19756","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-css"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>C\u00f3mo usar strechted link y crearlo sin Boostrap 5 - Caronte Studio<\/title>\n<meta name=\"description\" content=\"\u27a4 Descubre c\u00f3mo usar stretched link de Bootstrap 5 y crea tu propio enlace expandible para mejorar la usabilidad de tu sitio web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carontestudio.com\/blog\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo usar strechted link y crearlo sin Boostrap 5 - Caronte Studio\" \/>\n<meta property=\"og:description\" content=\"\u27a4 Descubre c\u00f3mo usar stretched link de Bootstrap 5 y crea tu propio enlace expandible para mejorar la usabilidad de tu sitio web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carontestudio.com\/blog\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de maketing | Caronte\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/carontewebstudio\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-31T11:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-18T12:25:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-Boostrap-5.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1250\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"David Boo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"David Boo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\\\/\"},\"author\":{\"name\":\"David Boo\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/b3de34e35d8ffffb7e620d1166ea5f52\"},\"headline\":\"C\u00f3mo usar strechted link y c\u00f3mo crear el nuestro sin Boostrap 5\",\"datePublished\":\"2024-05-31T11:00:00+00:00\",\"dateModified\":\"2024-06-18T12:25:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\\\/\"},\"wordCount\":673,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-Boostrap-5.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Dise\u00f1o web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\\\/\",\"name\":\"C\u00f3mo usar strechted link y crearlo sin Boostrap 5 - Caronte Studio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-Boostrap-5.jpg\",\"datePublished\":\"2024-05-31T11:00:00+00:00\",\"dateModified\":\"2024-06-18T12:25:26+00:00\",\"description\":\"\u27a4 Descubre c\u00f3mo usar stretched link de Bootstrap 5 y crea tu propio enlace expandible para mejorar la usabilidad de tu sitio web.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-Boostrap-5.jpg\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-Boostrap-5.jpg\",\"width\":1250,\"height\":737},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo usar strechted link y c\u00f3mo crear el nuestro sin Boostrap 5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"name\":\"Blog de marketing | Caronte\",\"description\":\"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.\",\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\",\"name\":\"Caronte - Agencia de marketing\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"width\":1090,\"height\":155,\"caption\":\"Caronte - Agencia de marketing\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/carontewebstudio\\\/\",\"https:\\\/\\\/www.instagram.com\\\/caronte_studio\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@carontewebstudio\",\"https:\\\/\\\/www.youtube.com\\\/@carontewebstudio\",\"https:\\\/\\\/es.linkedin.com\\\/company\\\/carontewebstudio\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/b3de34e35d8ffffb7e620d1166ea5f52\",\"name\":\"David Boo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/18a3ceeedb69fb45810646b329f07e0675f1e3b50d53fd3cb7522332f8c15ee9?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/18a3ceeedb69fb45810646b329f07e0675f1e3b50d53fd3cb7522332f8c15ee9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/18a3ceeedb69fb45810646b329f07e0675f1e3b50d53fd3cb7522332f8c15ee9?s=96&d=mm&r=g\",\"caption\":\"David Boo\"},\"sameAs\":[\"http:\\\/\\\/carontestudio.com\"],\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/author\\\/david-boo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo usar strechted link y crearlo sin Boostrap 5 - Caronte Studio","description":"\u27a4 Descubre c\u00f3mo usar stretched link de Bootstrap 5 y crea tu propio enlace expandible para mejorar la usabilidad de tu sitio web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/carontestudio.com\/blog\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo usar strechted link y crearlo sin Boostrap 5 - Caronte Studio","og_description":"\u27a4 Descubre c\u00f3mo usar stretched link de Bootstrap 5 y crea tu propio enlace expandible para mejorar la usabilidad de tu sitio web.","og_url":"https:\/\/carontestudio.com\/blog\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\/","og_site_name":"Blog de maketing | Caronte","article_publisher":"https:\/\/www.facebook.com\/carontewebstudio\/","article_published_time":"2024-05-31T11:00:00+00:00","article_modified_time":"2024-06-18T12:25:26+00:00","og_image":[{"width":1250,"height":737,"url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-Boostrap-5.jpg","type":"image\/jpeg"}],"author":"David Boo","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"David Boo","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/carontestudio.com\/blog\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\/#article","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\/"},"author":{"name":"David Boo","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/b3de34e35d8ffffb7e620d1166ea5f52"},"headline":"C\u00f3mo usar strechted link y c\u00f3mo crear el nuestro sin Boostrap 5","datePublished":"2024-05-31T11:00:00+00:00","dateModified":"2024-06-18T12:25:26+00:00","mainEntityOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\/"},"wordCount":673,"commentCount":0,"publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-Boostrap-5.jpg","keywords":["CSS"],"articleSection":["Dise\u00f1o web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carontestudio.com\/blog\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carontestudio.com\/blog\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\/","url":"https:\/\/carontestudio.com\/blog\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\/","name":"C\u00f3mo usar strechted link y crearlo sin Boostrap 5 - Caronte Studio","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\/#primaryimage"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-Boostrap-5.jpg","datePublished":"2024-05-31T11:00:00+00:00","dateModified":"2024-06-18T12:25:26+00:00","description":"\u27a4 Descubre c\u00f3mo usar stretched link de Bootstrap 5 y crea tu propio enlace expandible para mejorar la usabilidad de tu sitio web.","breadcrumb":{"@id":"https:\/\/carontestudio.com\/blog\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carontestudio.com\/blog\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\/#primaryimage","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-Boostrap-5.jpg","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/05\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-Boostrap-5.jpg","width":1250,"height":737},{"@type":"BreadcrumbList","@id":"https:\/\/carontestudio.com\/blog\/como-usar-strechted-link-y-como-crear-el-nuestro-sin-boostrap-5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/carontestudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo usar strechted link y c\u00f3mo crear el nuestro sin Boostrap 5"}]},{"@type":"WebSite","@id":"https:\/\/carontestudio.com\/blog\/#website","url":"https:\/\/carontestudio.com\/blog\/","name":"Blog de marketing | Caronte","description":"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.","publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carontestudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/carontestudio.com\/blog\/#organization","name":"Caronte - Agencia de marketing","url":"https:\/\/carontestudio.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","width":1090,"height":155,"caption":"Caronte - Agencia de marketing"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/carontewebstudio\/","https:\/\/www.instagram.com\/caronte_studio\/","https:\/\/www.tiktok.com\/@carontewebstudio","https:\/\/www.youtube.com\/@carontewebstudio","https:\/\/es.linkedin.com\/company\/carontewebstudio"]},{"@type":"Person","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/b3de34e35d8ffffb7e620d1166ea5f52","name":"David Boo","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/18a3ceeedb69fb45810646b329f07e0675f1e3b50d53fd3cb7522332f8c15ee9?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/18a3ceeedb69fb45810646b329f07e0675f1e3b50d53fd3cb7522332f8c15ee9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/18a3ceeedb69fb45810646b329f07e0675f1e3b50d53fd3cb7522332f8c15ee9?s=96&d=mm&r=g","caption":"David Boo"},"sameAs":["http:\/\/carontestudio.com"],"url":"https:\/\/carontestudio.com\/blog\/author\/david-boo\/"}]}},"_links":{"self":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/19756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/comments?post=19756"}],"version-history":[{"count":12,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/19756\/revisions"}],"predecessor-version":[{"id":20203,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/19756\/revisions\/20203"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media\/19837"}],"wp:attachment":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media?parent=19756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/categories?post=19756"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/tags?post=19756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}