{"id":1217,"date":"2024-04-04T19:28:38","date_gmt":"2024-04-04T22:28:38","guid":{"rendered":"https:\/\/martafagundez.com\/codevolution\/?p=1217"},"modified":"2024-11-20T01:49:15","modified_gmt":"2024-11-20T04:49:15","slug":"instalar-bootstrap-en-react","status":"publish","type":"post","link":"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/","title":{"rendered":"C\u00f3mo instalar Bootstrap en React"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Hay <strong>varias maneras<\/strong> en las que puedes integrar Bootstrap en una aplicaci\u00f3n desarrollada con React. En este post te compartir\u00e9 3 posibles formas de hacerlo:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>mediante <strong>CDN<\/strong><\/li>\n\n\n\n<li>mediante <strong>npm<\/strong><\/li>\n\n\n\n<li>mediante <strong>React Bootstrap<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n<h2 class=\"simpletoc-title\">Tabla de contenidos<\/h2>\n<style>html { scroll-behavior: smooth; }<\/style><ul class=\"simpletoc-list\">\n<li><a href=\"#cdn\">C\u00f3mo importar Bootstrap mediante CDN<\/a>\n\n\n<ul><li>\n<a href=\"#algunas-ventajas-y-desventajas\">Algunas Ventajas y Desventajas<\/a>\n\n<\/li>\n<\/ul>\n<li><a href=\"#npm\">C\u00f3mo instalar Bootstrap mediante npm<\/a>\n\n\n<ul><li>\n<a href=\"#importando-bootstrap-en-la-aplicacion\">Importando Bootstrap en la aplicaci\u00f3n<\/a>\n\n<\/li>\n<li><a href=\"#algunas-ventajas-y-desventajas\">Algunas Ventajas y Desventajas<\/a>\n\n<\/li>\n<\/ul>\n<li><a href=\"#como-integrar-bootstrap-mediante-react-bootstrap\">C\u00f3mo integrar Bootstrap mediante React Bootstrap<\/a>\n\n\n<ul><li>\n<a href=\"#algunas-ventajas-y-desventajas\">Algunas Ventajas y Desventajas<\/a>\n\n<\/li>\n<\/ul>\n<li><a href=\"#la-mejor-forma-de-importar-bootstrap-en-react\">La mejor forma de importar Bootstrap en React<\/a>\n<\/li><\/ul>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En los ejemplos que te comparto estoy utilizando fragmentos de c\u00f3digo tomados del <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">sitio web de Bootstrap<\/a> en su versi\u00f3n m\u00e1s actualizada al d\u00eda de hoy.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sin embargo, cuando leas este art\u00edculo, <strong>es posible que ya exista una versi\u00f3n m\u00e1s actual de Bootstrap<\/strong>, por lo que te recomiendo que no uses el c\u00f3digo que encontrar\u00e1s aqu\u00ed como ejemplo, sino que lo obtengas directamente de su sitio web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"cdn\">C\u00f3mo importar Bootstrap mediante CDN<\/h2>\n\n\n<p class=\"wp-block-paragraph\">Esta es una forma sencilla y r\u00e1pida de integrar Bootstrap a tu aplicaci\u00f3n React, pero <strong>NO te la recomiendo si quieres personalizar los estilos de Bootstrap<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dir\u00edgete al <strong>directorio ra\u00edz de tu aplicaci\u00f3n<\/strong> y abre el archivo <code>index.html<\/code> y :<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Dentro del elemento <code>&lt;head&gt; <\/code>utiliza un elemento <code>&lt;link&gt;<\/code> para <strong>importar los estilos CSS de Bootstap<\/strong>.<\/li>\n\n\n\n<li>Dentro del elemento <code>&lt;body&gt;<\/code>, justo antes de su etiqueta de cierre, utiliza un elemento <code>&lt;script&gt;<\/code> para <strong>importar las funcionalidades Javascript de Bootstrap<\/strong>:<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers cbp-blur-enabled cbp-unblur-on-hover\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#f6f6f4;--cbp-line-number-width:calc(2 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(251, 251, 239, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 0 16px;font-size:0.8em;width:100%;text-align:left;background-color:#282A36;font-style:italic;color:#f6f6f4\"><span style=\"border-bottom:1px solid rgba(251, 251, 239, 0.2)\">index.html<\/span><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;link rel=&quot;icon&quot; type=&quot;image\/svg+xml&quot; href=&quot;\/vite.svg&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;link\n      href=&quot;https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css&quot;\n      rel=&quot;stylesheet&quot;\n      integrity=&quot;sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH&quot;\n      crossorigin=&quot;anonymous&quot;\n    \/&gt;\n    &lt;title&gt;Bootstrap in React&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div id=&quot;root&quot;&gt;&lt;\/div&gt;\n    &lt;script\n      src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js&quot;\n      integrity=&quot;sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz&quot;\n      crossorigin=&quot;anonymous&quot;\n    &gt;&lt;\/script&gt;\n    &lt;script type=&quot;module&quot; src=&quot;\/src\/main.jsx&quot;&gt;&lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F6F6F4\">&lt;!<\/span><span style=\"color: #F286C4\">DOCTYPE<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">html<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">&lt;<\/span><span style=\"color: #F286C4\">html<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">lang<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">en<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  &lt;<\/span><span style=\"color: #F286C4\">head<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    &lt;<\/span><span style=\"color: #F286C4\">meta<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">charset<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">UTF-8<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    &lt;<\/span><span style=\"color: #F286C4\">link<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">rel<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">icon<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">type<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">image\/svg+xml<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">href<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">\/vite.svg<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    &lt;<\/span><span style=\"color: #F286C4\">meta<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">name<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">viewport<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">content<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">width=device-width, initial-scale=1.0<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> \/&gt;<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">    &lt;<\/span><span style=\"color: #F286C4\">link<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">      <\/span><span style=\"color: #62E884; font-style: italic\">href<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css<\/span><span style=\"color: #DEE492\">&quot;<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">      <\/span><span style=\"color: #62E884; font-style: italic\">rel<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">stylesheet<\/span><span style=\"color: #DEE492\">&quot;<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">      <\/span><span style=\"color: #62E884; font-style: italic\">integrity<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH<\/span><span style=\"color: #DEE492\">&quot;<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">      <\/span><span style=\"color: #62E884; font-style: italic\">crossorigin<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">anonymous<\/span><span style=\"color: #DEE492\">&quot;<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">    \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    &lt;<\/span><span style=\"color: #F286C4\">title<\/span><span style=\"color: #F6F6F4\">&gt;Bootstrap in React&lt;\/<\/span><span style=\"color: #F286C4\">title<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  &lt;\/<\/span><span style=\"color: #F286C4\">head<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  &lt;<\/span><span style=\"color: #F286C4\">body<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    &lt;<\/span><span style=\"color: #F286C4\">div<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">id<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">root<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;&lt;\/<\/span><span style=\"color: #F286C4\">div<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">    &lt;<\/span><span style=\"color: #F286C4\">script<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">      <\/span><span style=\"color: #62E884; font-style: italic\">src<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js<\/span><span style=\"color: #DEE492\">&quot;<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">      <\/span><span style=\"color: #62E884; font-style: italic\">integrity<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz<\/span><span style=\"color: #DEE492\">&quot;<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">      <\/span><span style=\"color: #62E884; font-style: italic\">crossorigin<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">anonymous<\/span><span style=\"color: #DEE492\">&quot;<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">    &gt;&lt;\/<\/span><span style=\"color: #F286C4\">script<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    &lt;<\/span><span style=\"color: #F286C4\">script<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">type<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">module<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">src<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">\/src\/main.jsx<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;&lt;\/<\/span><span style=\"color: #F286C4\">script<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  &lt;\/<\/span><span style=\"color: #F286C4\">body<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">&lt;\/<\/span><span style=\"color: #F286C4\">html<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#282A36;color:#ebebe6;font-size:12px;line-height:1;position:relative\">HTML<\/span><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Con estos simples pasos ya puedes utilizar las clases y los componentes de Bootstrap en los componentes React de tu aplicaci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"algunas-ventajas-y-desventajas\">Algunas Ventajas y Desventajas<\/h3>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ventajas<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Facilidad y rapidez de implementaci\u00f3n<\/strong><\/li>\n\n\n\n<li><strong>Rapidez de carga:<\/strong> Bootstrap es usado en muchos sitios web, por lo que es probable que quien visite tu web ya haya visitado un sitio que utiliza su CDN. En esos casos los archivos ya se habr\u00e1n almacenado en cach\u00e9 por el navegador y no ser\u00e1 necesario volver a descargarlos.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Desventajas<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>No puedes personalizar los estilos CSS de Bootstrap mediante Sass<\/strong> (la forma m\u00e1s potente y flexible de hacerlo).<\/li>\n\n\n\n<li><strong>Es un recurso sobre el que no tienes control <\/strong>(posibles problemas de disponibilidad o seguridad, por ejemplo).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"npm\">C\u00f3mo instalar Bootstrap mediante npm<\/h2>\n\n\n<p class=\"wp-block-paragraph\">Si prefieres instalar Bootstrap en tu aplicaci\u00f3n (en vez de importarlo mediante CDN), puedes hacerlo mediante un sistema de gesti\u00f3n de paquetes (npm, yarn, etc). Veremos c\u00f3mo hacerlo con <strong>npm<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para ello, <strong>abre una terminal en el directorio ra\u00edz<\/strong> de tu aplicaci\u00f3n React (el directorio donde se encuentra el archivo <code>package.json<\/code>), y ejecuta el comando de instalaci\u00f3n: <\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" data-code=\"npm i bootstrap@5.3.3\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">npm<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">i<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">bootstrap@5.3.3<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#2e3440ff;color:#c8d0e0;font-size:12px;line-height:1;position:relative\">Bash<\/span><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Esto descargar\u00e1 e instalar\u00e1 Bootstrap y sus dependencias en tu proyecto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"importando-bootstrap-en-la-aplicacion\">Importando Bootstrap en la aplicaci\u00f3n<\/h3>\n\n\n<p class=\"wp-block-paragraph\">Despu\u00e9s de instalar Bootstrap, <strong>necesitas importarlo para que puedas comenzar a usarlo<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por lo general, esto se hace <strong>en el archivo de punto de entrada de tu aplicaci\u00f3n<\/strong>, como <code>index.js<\/code>, <code>main.jsx<\/code> o <code>App.jsx<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Justo antes de importar el archivo que contiene los dem\u00e1s estilos CSS de tu  aplicaci\u00f3n (<strong><code>index.css<\/code><\/strong> en el ejemplo), importa los <strong>estilos CSS de Bootstrap<\/strong>. Luego importa las <strong>funcionalidades Javascript de Bootstrap<\/strong>:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers cbp-blur-enabled cbp-unblur-on-hover\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#f6f6f4;--cbp-line-number-width:calc(2 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(251, 251, 239, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 0 16px;font-size:0.8em;width:100%;text-align:left;background-color:#282A36;font-style:italic;color:#f6f6f4\"><span style=\"border-bottom:1px solid rgba(251, 251, 239, 0.2)\">main.jsx<\/span><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport App from '.\/App.jsx';\nimport &quot;bootstrap\/dist\/css\/bootstrap.min.css&quot;;\nimport '.\/index.css';\nimport &quot;bootstrap\/dist\/js\/bootstrap.js&quot;;\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  &lt;React.StrictMode&gt;\n    &lt;App \/&gt;\n  &lt;\/React.StrictMode&gt;,\n)\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F286C4\">import<\/span><span style=\"color: #F6F6F4\"> React <\/span><span style=\"color: #F286C4\">from<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\">react<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">import<\/span><span style=\"color: #F6F6F4\"> ReactDOM <\/span><span style=\"color: #F286C4\">from<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\">react-dom\/client<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">import<\/span><span style=\"color: #F6F6F4\"> App <\/span><span style=\"color: #F286C4\">from<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\">.\/App.jsx<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F286C4\">import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">bootstrap\/dist\/css\/bootstrap.min.css<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line cbp-no-blur\"><span style=\"color: #F286C4\">import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\">.\/index.css<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F286C4\">import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">bootstrap\/dist\/js\/bootstrap.js<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">ReactDOM.<\/span><span style=\"color: #62E884\">createRoot<\/span><span style=\"color: #F6F6F4\">(document.<\/span><span style=\"color: #62E884\">getElementById<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\">root<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #F6F6F4\">)).<\/span><span style=\"color: #62E884\">render<\/span><span style=\"color: #F6F6F4\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  &lt;<\/span><span style=\"color: #97E1F1; font-style: italic\">React.StrictMode<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    &lt;<\/span><span style=\"color: #97E1F1; font-style: italic\">App<\/span><span style=\"color: #F6F6F4\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  &lt;\/<\/span><span style=\"color: #97E1F1; font-style: italic\">React.StrictMode<\/span><span style=\"color: #F6F6F4\">&gt;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">)<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#282A36;color:#ebebe6;font-size:12px;line-height:1;position:relative\">JSX<\/span><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Si deseas personalizar los estilos de Bootstrap<\/strong>, el proceso de importaci\u00f3n de los estilos CSS requiere unos pasos adicionales que puedes leer en <a href=\"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\" target=\"_blank\" rel=\"noreferrer noopener\">este post<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"algunas-ventajas-y-desventajas\">Algunas Ventajas y Desventajas<\/h3>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ventajas<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong><strong>Gesti\u00f3n de versiones y dependencias:<\/strong><\/strong> Al instalar Bootstrap a trav\u00e9s de un gestor de paquetes, puedes gestionar f\u00e1cilmente las versiones y las dependencias de tu proyecto.<\/li>\n\n\n\n<li><strong>Puedes personalizar Bootstrap mediante Sass<\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Desventajas<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Aumento del tama\u00f1o del paquete<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"como-integrar-bootstrap-mediante-react-bootstrap\">C\u00f3mo integrar Bootstrap mediante React Bootstrap<\/h2>\n\n\n<p class=\"wp-block-paragraph\">Otra forma de utilizar Bootstrap en una aplicaci\u00f3n React es con <strong><a href=\"https:\/\/react-bootstrap.netlify.app\/\" target=\"_blank\" rel=\"noreferrer noopener\">React Bootstrap<\/a><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">React Bootstrap es una librer\u00eda basada en componentes que ofrece componentes y utilidades de Bootstrap nativo encapsulados <strong>en componentes de React<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>React Bootstrap depende de los estilos CSS que provee Bootstrap<\/strong>, por lo que <span style=\"text-decoration: underline;\">es necesario que tengas importados dichos estilos en tu aplicaci\u00f3n<\/span>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#cdn\">import\u00e1ndolos <strong>mediante CDN<\/strong><\/a> \u00f3, <\/li>\n\n\n\n<li><a href=\"#npm\">instalando Bootstrap <strong>mediante npm<\/strong><\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Una vez tengas los estilos CSS de Bootstrap importados, <strong>abre una terminal en el directorio ra\u00edz<\/strong> de tu aplicaci\u00f3n React y ejecuta el comando de instalaci\u00f3n de React Bootstrap:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" data-code=\"npm install react-bootstrap\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #62E884\">npm<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #E7EE98\">install<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #E7EE98\">react-bootstrap<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#282A36;color:#ebebe6;font-size:12px;line-height:1;position:relative\">Bash<\/span><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"algunas-ventajas-y-desventajas\">Algunas Ventajas y Desventajas<\/h3>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ventajas<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Componentes predefinidos y optimizados para React<\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Desventajas<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Aumento del tama\u00f1o del paquete<\/strong><\/li>\n\n\n\n<li><strong>Dependencia de la comunidad y la documentaci\u00f3n:<\/strong> Al utilizar React Bootstrap, est\u00e1s confiando en la comunidad de desarrolladores para mantener y actualizar la biblioteca.<\/li>\n\n\n\n<li><strong>Curva de aprendizaje adicional<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"la-mejor-forma-de-importar-bootstrap-en-react\">La mejor forma de importar Bootstrap en React<\/h2>\n\n\n<p class=\"wp-block-paragraph\">Cada una de las 3 formas expuestas para integrar Bootstrap a una aplicaci\u00f3n desarrollada con React tiene sus pros y sus contras, sus defensores y sus detractores.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mi opini\u00f3n es que <strong>ninguna es \u00abla mejor\u00bb en todos los escenarios<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pienso que lo mejor es <strong>conocer las opciones que tenemos<\/strong>, evaluar sus ventajas y desventajas para as\u00ed poder decidir cu\u00e1l nos conviene utilizar en cada caso, dependiendo de las necesidades de la aplicaci\u00f3n a desarrollar y del equipo de desarrollo involucrado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora que ya conoces estas 3 formas de importar Bootstrap en una aplicaci\u00f3n desarrollada con React, puedes <strong>experimentar con cada una y sacar tus propias conclusiones<\/strong> .<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00bfVes ventajas o desventajas adicionales a alguno de estos m\u00e9todos?<br>\u00bfCu\u00e1l es el m\u00e9todo que usas m\u00e1s frecuentemente?<br>\u00bfUtilizas un m\u00e9todo diferente?\ud83e\udd14<br>Puedes compartir tus ideas en los comentarios \ud83d\ude09.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Y si est\u00e1s dando tus primeros pasos en el uso de Bootstrap con React, tal vez te interese este post sobre <a href=\"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\" target=\"_blank\" rel=\"noreferrer noopener\">c\u00f3mo usar componentes y clases de Bootstrap en tus componentes React<\/a> o este sobre <a href=\"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\" target=\"_blank\" rel=\"noreferrer noopener\">c\u00f3mo personalizar Bootstrap<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hay varias maneras en las que puedes integrar Bootstrap en una aplicaci\u00f3n desarrollada con React. En este post te compartir\u00e9 3 posibles formas de hacerlo:&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1437,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[37,42,38,22],"tags":[34],"class_list":["post-1217","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","category-desarrollo-web","category-frontend","category-react","tag-front-end"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00f3mo instalar Bootstrap en React - CODEvolution<\/title>\n<meta name=\"description\" content=\"Hay varias maneras en las que puedes integrar Bootstrap en una aplicaci\u00f3n desarrollada con React. En este post te compartir\u00e9 3 posibles formas de hacerlo.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo instalar Bootstrap en React - CODEvolution\" \/>\n<meta property=\"og:description\" content=\"Hay varias maneras en las que puedes integrar Bootstrap en una aplicaci\u00f3n desarrollada con React. En este post te compartir\u00e9 3 posibles formas de hacerlo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/\" \/>\n<meta property=\"og:site_name\" content=\"CODEvolution\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-04T22:28:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-20T04:49:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_instalar_bootstrap_react-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"950\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marta Fag\u00fandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marta Fag\u00fandez\" \/>\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:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/\"},\"author\":{\"name\":\"Marta Fag\u00fandez\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1\"},\"headline\":\"C\u00f3mo instalar Bootstrap en React\",\"datePublished\":\"2024-04-04T22:28:38+00:00\",\"dateModified\":\"2024-11-20T04:49:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/\"},\"wordCount\":894,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1\"},\"image\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_instalar_bootstrap_react-1.jpg\",\"keywords\":[\"Front End\"],\"articleSection\":[\"Bootstrap\",\"Desarrollo Web\",\"Front End\",\"React\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/\",\"url\":\"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/\",\"name\":\"C\u00f3mo instalar Bootstrap en React - CODEvolution\",\"isPartOf\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_instalar_bootstrap_react-1.jpg\",\"datePublished\":\"2024-04-04T22:28:38+00:00\",\"dateModified\":\"2024-11-20T04:49:15+00:00\",\"description\":\"Hay varias maneras en las que puedes integrar Bootstrap en una aplicaci\u00f3n desarrollada con React. En este post te compartir\u00e9 3 posibles formas de hacerlo.\",\"breadcrumb\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/#primaryimage\",\"url\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_instalar_bootstrap_react-1.jpg\",\"contentUrl\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_instalar_bootstrap_react-1.jpg\",\"width\":950,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/martafagundez.com\/codevolution\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo instalar Bootstrap en React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#website\",\"url\":\"https:\/\/martafagundez.com\/codevolution\/\",\"name\":\"CODEvolution\",\"description\":\"Blog de Marta Fag\u00fandez\",\"publisher\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/martafagundez.com\/codevolution\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1\",\"name\":\"Marta Fag\u00fandez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2023\/08\/marta_fagundez_developer_avatar1.png\",\"contentUrl\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2023\/08\/marta_fagundez_developer_avatar1.png\",\"width\":603,\"height\":603,\"caption\":\"Marta Fag\u00fandez\"},\"logo\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/image\/\"},\"description\":\"Aqu\u00ed comparto algunos de mis aprendizajes como desarrolladora web. Si alguno de mis art\u00edculos te ha resultado \u00fatil, me alegrar\u00eda saberlo ;)\",\"sameAs\":[\"https:\/\/martafagundez.com\",\"https:\/\/www.linkedin.com\/in\/martafagundezrodriguez\",\"https:\/\/www.youtube.com\/@martafagundez\"],\"url\":\"https:\/\/martafagundez.com\/codevolution\/author\/marta\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo instalar Bootstrap en React - CODEvolution","description":"Hay varias maneras en las que puedes integrar Bootstrap en una aplicaci\u00f3n desarrollada con React. En este post te compartir\u00e9 3 posibles formas de hacerlo.","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:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo instalar Bootstrap en React - CODEvolution","og_description":"Hay varias maneras en las que puedes integrar Bootstrap en una aplicaci\u00f3n desarrollada con React. En este post te compartir\u00e9 3 posibles formas de hacerlo.","og_url":"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/","og_site_name":"CODEvolution","article_published_time":"2024-04-04T22:28:38+00:00","article_modified_time":"2024-11-20T04:49:15+00:00","og_image":[{"width":950,"height":500,"url":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_instalar_bootstrap_react-1.jpg","type":"image\/jpeg"}],"author":"Marta Fag\u00fandez","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Marta Fag\u00fandez","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/#article","isPartOf":{"@id":"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/"},"author":{"name":"Marta Fag\u00fandez","@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1"},"headline":"C\u00f3mo instalar Bootstrap en React","datePublished":"2024-04-04T22:28:38+00:00","dateModified":"2024-11-20T04:49:15+00:00","mainEntityOfPage":{"@id":"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/"},"wordCount":894,"commentCount":0,"publisher":{"@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1"},"image":{"@id":"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/#primaryimage"},"thumbnailUrl":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_instalar_bootstrap_react-1.jpg","keywords":["Front End"],"articleSection":["Bootstrap","Desarrollo Web","Front End","React"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/","url":"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/","name":"C\u00f3mo instalar Bootstrap en React - CODEvolution","isPartOf":{"@id":"https:\/\/martafagundez.com\/codevolution\/#website"},"primaryImageOfPage":{"@id":"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/#primaryimage"},"image":{"@id":"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/#primaryimage"},"thumbnailUrl":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_instalar_bootstrap_react-1.jpg","datePublished":"2024-04-04T22:28:38+00:00","dateModified":"2024-11-20T04:49:15+00:00","description":"Hay varias maneras en las que puedes integrar Bootstrap en una aplicaci\u00f3n desarrollada con React. En este post te compartir\u00e9 3 posibles formas de hacerlo.","breadcrumb":{"@id":"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/#primaryimage","url":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_instalar_bootstrap_react-1.jpg","contentUrl":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_instalar_bootstrap_react-1.jpg","width":950,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/martafagundez.com\/codevolution\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo instalar Bootstrap en React"}]},{"@type":"WebSite","@id":"https:\/\/martafagundez.com\/codevolution\/#website","url":"https:\/\/martafagundez.com\/codevolution\/","name":"CODEvolution","description":"Blog de Marta Fag\u00fandez","publisher":{"@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/martafagundez.com\/codevolution\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1","name":"Marta Fag\u00fandez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/image\/","url":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2023\/08\/marta_fagundez_developer_avatar1.png","contentUrl":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2023\/08\/marta_fagundez_developer_avatar1.png","width":603,"height":603,"caption":"Marta Fag\u00fandez"},"logo":{"@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/image\/"},"description":"Aqu\u00ed comparto algunos de mis aprendizajes como desarrolladora web. Si alguno de mis art\u00edculos te ha resultado \u00fatil, me alegrar\u00eda saberlo ;)","sameAs":["https:\/\/martafagundez.com","https:\/\/www.linkedin.com\/in\/martafagundezrodriguez","https:\/\/www.youtube.com\/@martafagundez"],"url":"https:\/\/martafagundez.com\/codevolution\/author\/marta\/"}]}},"jetpack_featured_media_url":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_instalar_bootstrap_react-1.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts\/1217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/comments?post=1217"}],"version-history":[{"count":86,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts\/1217\/revisions"}],"predecessor-version":[{"id":1400,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts\/1217\/revisions\/1400"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/media\/1437"}],"wp:attachment":[{"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/media?parent=1217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/categories?post=1217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/tags?post=1217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}