{"id":1311,"date":"2024-04-05T00:54:10","date_gmt":"2024-04-05T03:54:10","guid":{"rendered":"https:\/\/martafagundez.com\/codevolution\/?p=1311"},"modified":"2024-11-20T01:49:32","modified_gmt":"2024-11-20T04:49:32","slug":"como-usar-bootstrap-en-componentes-react","status":"publish","type":"post","link":"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/","title":{"rendered":"C\u00f3mo usar Bootstrap en Componentes React"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Una vez <a href=\"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/\" target=\"_blank\" rel=\"noreferrer noopener\">has instalado Bootstrap en tu aplicaci\u00f3n React <\/a>tienes a tu disposici\u00f3n un <strong>potente set de componentes y utilidades<\/strong> que te ayudar\u00e1n a desarrollar un sitio web atractivo, interactivo y adaptable a distintos tipos de dispositivos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bootstrap es una caja de herramientas potente y flexible. <strong>Puedes usarlo de una forma muy simple o bastante m\u00e1s sofisticada<\/strong>, todo depende de las necesidades de tu aplicaci\u00f3n y del conocimiento que tengas de la herramienta.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Este post muestra un uso b\u00e1sico, <strong>orientado a principiantes en el uso de Bootstrap en componentes React<\/strong>. Pronto llegar\u00e1n posts dedicados a usos m\u00e1s avanzados \ud83d\udcdd. <\/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=\"simpletoc-title\">Tabla de contenidos<\/h2>\n<style>html { scroll-behavior: smooth; }<\/style><ul class=\"simpletoc-list\">\n<li><a href=\"#usando-componentes-de-bootstrap\">Usando Componentes de Bootstrap<\/a>\n\n<\/li>\n<li><a href=\"#usando-clases-de-bootstrap\">Usando Clases de Bootstrap<\/a>\n\n<\/li>\n<li><a href=\"#usando-componentes-de-react-bootstrap\">Usando componentes de React Bootstrap<\/a>\n\n<\/li>\n<li><a href=\"#la-practica-hace-al-maestro\">La pr\u00e1ctica hace al maestro<\/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\">Al usar Bootstrap, es una buena idea <strong>guardar su sitio web en los marcadores de tu navegador<\/strong>; vas a recurrir a \u00e9l constantemente \ud83e\udd13.<\/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=\"usando-componentes-de-bootstrap\">Usando Componentes de Bootstrap<\/h2>\n\n\n<p class=\"wp-block-paragraph\">En la <strong>documentaci\u00f3n de Bootstrap<\/strong>, en la <strong>secci\u00f3n de <\/strong>\u00ab<strong>Componentes<\/strong>\u00ab, busca el componente que quieras usar, selecciona el ejemplo que mejor se ajuste a tus necesidades y copia el c\u00f3digo de muestra.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por ejemplo, este es el c\u00f3digo para un componente \u00abdropdown\u00bb (desplegable):<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers\" 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);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" data-code=\"&lt;div class=&quot;dropdown&quot;&gt;\n  &lt;button class=&quot;btn btn-secondary dropdown-toggle&quot; type=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;\n    Dropdown button\n  &lt;\/button&gt;\n  &lt;ul class=&quot;dropdown-menu&quot;&gt;\n    &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;\/a&gt;&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/div&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\">div<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">class<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">dropdown<\/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\">button<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">class<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">btn btn-secondary dropdown-toggle<\/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\">button<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">data-bs-toggle<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">dropdown<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">aria-expanded<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">false<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    Dropdown button<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  &lt;\/<\/span><span style=\"color: #F286C4\">button<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  &lt;<\/span><span style=\"color: #F286C4\">ul<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">class<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">dropdown-menu<\/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\">li<\/span><span style=\"color: #F6F6F4\">&gt;&lt;<\/span><span style=\"color: #F286C4\">a<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">class<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">dropdown-item<\/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\">#<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;Action&lt;\/<\/span><span style=\"color: #F286C4\">a<\/span><span style=\"color: #F6F6F4\">&gt;&lt;\/<\/span><span style=\"color: #F286C4\">li<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    &lt;<\/span><span style=\"color: #F286C4\">li<\/span><span style=\"color: #F6F6F4\">&gt;&lt;<\/span><span style=\"color: #F286C4\">a<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">class<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">dropdown-item<\/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\">#<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;Another action&lt;\/<\/span><span style=\"color: #F286C4\">a<\/span><span style=\"color: #F6F6F4\">&gt;&lt;\/<\/span><span style=\"color: #F286C4\">li<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    &lt;<\/span><span style=\"color: #F286C4\">li<\/span><span style=\"color: #F6F6F4\">&gt;&lt;<\/span><span style=\"color: #F286C4\">a<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">class<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">dropdown-item<\/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\">#<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;Something else here&lt;\/<\/span><span style=\"color: #F286C4\">a<\/span><span style=\"color: #F6F6F4\">&gt;&lt;\/<\/span><span style=\"color: #F286C4\">li<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  &lt;\/<\/span><span style=\"color: #F286C4\">ul<\/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\">&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\">Pega el c\u00f3digo que copiaste <strong>en el c\u00f3digo JSX del componente React <\/strong>dentro del cual quieras usarlo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Teniendo en cuenta que el c\u00f3digo que ofrece la documentaci\u00f3n de Bootstrap es c\u00f3digo HTML, <strong>necesitar\u00e1s hacerle algunos ajustes para que sea compatible con la sintaxis JSX<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Los ajustes necesarios dependen de cada componente<\/strong>. En el caso del componente dropdown anterior, s\u00f3lo es necesario sustituir el atributo <code>class<\/code> por <code>className<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adicionalmente, puedes <strong>modificar las clases de los elementos que lo componen<\/strong>, cambiar su contenido, etc.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por ejemplo, en el componente dropdown anterior, en el elemento <code>&lt;button&gt;<\/code> sustitu\u00ed la clase <code>btn-secondary<\/code> por <code>btn-dark<\/code> para obtener el color que deseaba para el bot\u00f3n:<\/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)\">App.jsx<\/span><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import React from &quot;react&quot;;\n\nfunction App() {\n\n  return (\n      &lt;div className=&quot;main-container&quot;&gt;\n        &lt;h1&gt;Bootstrap &amp; React&lt;\/h1&gt;\n        &lt;p className=&quot;mb-4 fs-5&quot;&gt;This is an example of a Bootstrap component &lt;br \/&gt;used within a React component:&lt;\/p&gt;\n\n        &lt;div className=&quot;dropdown&quot;&gt;\n          &lt;button className=&quot;btn btn-dark dropdown-toggle&quot; type=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;\n            Dropdown button\n          &lt;\/button&gt;\n          &lt;ul className=&quot;dropdown-menu&quot;&gt;\n            &lt;li&gt;&lt;a className=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a className=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a className=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;\/a&gt;&lt;\/li&gt;\n          &lt;\/ul&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n  )\n}\n\nexport default App;\" 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\">&quot;<\/span><span style=\"color: #E7EE98\">react<\/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: #F286C4\">function<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884\">App<\/span><span style=\"color: #F6F6F4\">() {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #F286C4\">return<\/span><span style=\"color: #F6F6F4\"> (<\/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\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">main-container<\/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\">h1<\/span><span style=\"color: #F6F6F4\">&gt;Bootstrap &amp; React&lt;\/<\/span><span style=\"color: #F286C4\">h1<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">        &lt;<\/span><span style=\"color: #F286C4\">p<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">mb-4 fs-5<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;This is an example of a Bootstrap component &lt;<\/span><span style=\"color: #F286C4\">br<\/span><span style=\"color: #F6F6F4\"> \/&gt;used within a React component:&lt;\/<\/span><span style=\"color: #F286C4\">p<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">        &lt;<\/span><span style=\"color: #F286C4\">div<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">dropdown<\/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\">button<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">btn btn-dark dropdown-toggle<\/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\">button<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">data-bs-toggle<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">dropdown<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">aria-expanded<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">false<\/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\">            Dropdown button<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">          &lt;\/<\/span><span style=\"color: #F286C4\">button<\/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\">ul<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">dropdown-menu<\/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\">li<\/span><span style=\"color: #F6F6F4\">&gt;&lt;<\/span><span style=\"color: #F286C4\">a<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">dropdown-item<\/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\">#<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;Action&lt;\/<\/span><span style=\"color: #F286C4\">a<\/span><span style=\"color: #F6F6F4\">&gt;&lt;\/<\/span><span style=\"color: #F286C4\">li<\/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\">li<\/span><span style=\"color: #F6F6F4\">&gt;&lt;<\/span><span style=\"color: #F286C4\">a<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">dropdown-item<\/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\">#<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;Another action&lt;\/<\/span><span style=\"color: #F286C4\">a<\/span><span style=\"color: #F6F6F4\">&gt;&lt;\/<\/span><span style=\"color: #F286C4\">li<\/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\">li<\/span><span style=\"color: #F6F6F4\">&gt;&lt;<\/span><span style=\"color: #F286C4\">a<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">dropdown-item<\/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\">#<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;Something else here&lt;\/<\/span><span style=\"color: #F286C4\">a<\/span><span style=\"color: #F6F6F4\">&gt;&lt;\/<\/span><span style=\"color: #F286C4\">li<\/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\">ul<\/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\">div<\/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\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">export<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #F286C4\">default<\/span><span style=\"color: #F6F6F4\"> App;<\/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\">Y con estos simples pasos, el componente de Bootstrap <strong>ya est\u00e1 integrado y funcionando correctamente<\/strong> como parte del componente React \ud83e\udd73:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized is-style-default\" id=\"dropdownNativo\"><img loading=\"lazy\" decoding=\"async\" width=\"630\" height=\"488\" src=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/dropdown.gif\" loading=\"lazy\" alt=\"\" class=\"wp-image-1263\" style=\"width:486px;height:auto\"\/><\/figure>\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=\"usando-clases-de-bootstrap\">Usando Clases de Bootstrap<\/h2>\n\n\n<p class=\"wp-block-paragraph\">Adem\u00e1s del uso de los componentes, podr\u00e1s <strong>aplicar las clases CSS que nos ofrece Bootstrap<\/strong> a cualquier elemento JSX de tus componentes React.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un ejemplo de ese uso lo puedes ver en el c\u00f3digo anterior, en el cual apliqu\u00e9 las clases <code>mb-4<\/code> y  <code>fs-5<\/code> a un elemento <code>&lt;p&gt;<\/code> para definir su margen inferior y su tama\u00f1o de fuente:<\/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 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)\">App.jsx<\/span><\/span><span role=\"button\" tabindex=\"0\" data-code=\"{\/* Resto del c\u00f3digo... *\/}\n  &lt;p className=&quot;mb-4 fs-5&quot;&gt;This is an example of a Bootstrap component &lt;br \/&gt;used within a React component:&lt;\/p&gt;\n{\/* Resto del c\u00f3digo... *\/}\" 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\">{<\/span><span style=\"color: #7B7F8B\">\/* Resto del c\u00f3digo... *\/<\/span><span style=\"color: #F6F6F4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  &lt;<\/span><span style=\"color: #F286C4\">p<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">mb-4 fs-5<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;This is an example of a Bootstrap component &lt;<\/span><span style=\"color: #F286C4\">br<\/span><span style=\"color: #F6F6F4\"> \/&gt;used within a React component:&lt;\/<\/span><span style=\"color: #F286C4\">p<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">{<\/span><span style=\"color: #7B7F8B\">\/* Resto del c\u00f3digo... *\/<\/span><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\">Si no lo has hecho a\u00fan, <strong>te recomiendo que explores la documentaci\u00f3n<\/strong> del <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">sitio web de Bootstrap<\/a> para conocer la gran variedad de clases que puedes usar para gestionar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li> colores<\/li>\n\n\n\n<li>tipograf\u00edas<\/li>\n\n\n\n<li>espaciados<\/li>\n\n\n\n<li>sombras<\/li>\n\n\n\n<li>opacidades<\/li>\n\n\n\n<li>layouts<\/li>\n\n\n\n<li>breakpoints<\/li>\n\n\n\n<li>etc.<\/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<h2 class=\"wp-block-heading\" id=\"usando-componentes-de-react-bootstrap\">Usando componentes de React Bootstrap<\/h2>\n\n\n<p class=\"wp-block-paragraph\">Como vimos en el post donde te compart\u00ed <a href=\"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/\">3 m\u00e9todos para integrar Bootstrap en una aplicaci\u00f3n desarrollada con React<\/a>, uno de esos m\u00e9todos es mediante el uso de <strong>React Bootstrap<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si ya tienes esta librer\u00eda instalada en tu aplicaci\u00f3n, dir\u00edgete al <a href=\"https:\/\/react-bootstrap.netlify.app\/\" target=\"_blank\" rel=\"noreferrer noopener\">sitio web de React Bootstrap<\/a> y en la <strong>secci\u00f3n de <\/strong>\u00ab<strong>Componentes<\/strong>\u00ab, busca el componente que quieras usar, selecciona el ejemplo que mejor se ajuste a tus necesidades y copia el c\u00f3digo de muestra.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para usar un componente de React Bootstrap debes:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>importarlo <\/strong>en el componente React donde deseas utilizarlo, y<\/li>\n\n\n\n<li>utilizarlo <strong>como utilizas cualquier componente React<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por ejemplo, as\u00ed quedar\u00eda el c\u00f3digo de mi componente <code>App.jsx<\/code>, si utilizara en \u00e9l un componente \u00ab<strong>dropdown<\/strong>\u00bb de React Bootstrap:<\/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)\">App.jsx<\/span><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import React from &quot;react&quot;;\nimport Dropdown from 'react-bootstrap\/Dropdown';\n\nfunction App() {\n\n  return (\n      &lt;div className=&quot;main-container&quot;&gt;\n        &lt;h1&gt;Bootstrap &amp; React&lt;\/h1&gt;\n        &lt;p className=&quot;mb-4 fs-5&quot;&gt;This is an example of how to use Bootstrap &lt;br \/&gt;with React Bootstrap component:&lt;\/p&gt;\n\n        &lt;Dropdown&gt;\n          &lt;Dropdown.Toggle variant=&quot;dark&quot; id=&quot;dropdown-basic&quot;&gt;\n            Dropdown button\n          &lt;\/Dropdown.Toggle&gt;\n\n          &lt;Dropdown.Menu&gt;\n            &lt;Dropdown.Item href=&quot;#\/action-1&quot;&gt;Action&lt;\/Dropdown.Item&gt;\n            &lt;Dropdown.Item href=&quot;#\/action-2&quot;&gt;Another action&lt;\/Dropdown.Item&gt;\n            &lt;Dropdown.Item href=&quot;#\/action-3&quot;&gt;Something else here&lt;\/Dropdown.Item&gt;\n          &lt;\/Dropdown.Menu&gt;\n        &lt;\/Dropdown&gt;\n      &lt;\/div&gt;\n  )\n}\n\nexport default App;\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\">&quot;<\/span><span style=\"color: #E7EE98\">react<\/span><span style=\"color: #DEE492\">&quot;<\/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\"> Dropdown <\/span><span style=\"color: #F286C4\">from<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #E7EE98\">react-bootstrap\/Dropdown<\/span><span style=\"color: #DEE492\">&#39;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">function<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884\">App<\/span><span style=\"color: #F6F6F4\">() {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #F286C4\">return<\/span><span style=\"color: #F6F6F4\"> (<\/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\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">main-container<\/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\">h1<\/span><span style=\"color: #F6F6F4\">&gt;Bootstrap &amp; React&lt;\/<\/span><span style=\"color: #F286C4\">h1<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">        &lt;<\/span><span style=\"color: #F286C4\">p<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">mb-4 fs-5<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;This is an example of how to use Bootstrap &lt;<\/span><span style=\"color: #F286C4\">br<\/span><span style=\"color: #F6F6F4\"> \/&gt;with React Bootstrap component:&lt;\/<\/span><span style=\"color: #F286C4\">p<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">        &lt;<\/span><span style=\"color: #97E1F1; font-style: italic\">Dropdown<\/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: #97E1F1; font-style: italic\">Dropdown.Toggle<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">variant<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">dark<\/span><span style=\"color: #DEE492\">&quot;<\/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\">dropdown-basic<\/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\">            Dropdown button<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">          &lt;\/<\/span><span style=\"color: #97E1F1; font-style: italic\">Dropdown.Toggle<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">          &lt;<\/span><span style=\"color: #97E1F1; font-style: italic\">Dropdown.Menu<\/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: #97E1F1; font-style: italic\">Dropdown.Item<\/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\">#\/action-1<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;Action&lt;\/<\/span><span style=\"color: #97E1F1; font-style: italic\">Dropdown.Item<\/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: #97E1F1; font-style: italic\">Dropdown.Item<\/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\">#\/action-2<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;Another action&lt;\/<\/span><span style=\"color: #97E1F1; font-style: italic\">Dropdown.Item<\/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: #97E1F1; font-style: italic\">Dropdown.Item<\/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\">#\/action-3<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;Something else here&lt;\/<\/span><span style=\"color: #97E1F1; font-style: italic\">Dropdown.Item<\/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: #97E1F1; font-style: italic\">Dropdown.Menu<\/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: #97E1F1; font-style: italic\">Dropdown<\/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\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">export<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #F286C4\">default<\/span><span style=\"color: #F6F6F4\"> App;<\/span><\/span>\n<span class=\"line\"><\/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\">Visto desde el navegador, este componente luce y se comporta de forma id\u00e9ntica a la implementaci\u00f3n del componente <a href=\"#dropdownNativo\">dropdown de Bootstrap nativo que vimos anteriormente<\/a>.<\/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-practica-hace-al-maestro\">La pr\u00e1ctica hace al maestro<\/h2>\n\n\n<p class=\"wp-block-paragraph\">Bootstrap <strong>ofrece una larga lista de componentes y utilidades<\/strong>, y esa lista se sigue ampliando con cada nueva versi\u00f3n.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No es mi objetivo detallar esta lista, eso ya est\u00e1 hecho de forma muy did\u00e1ctica en la <strong>documentaci\u00f3n de Bootstrap<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El prop\u00f3sito de este post es ayudarte a dar tus primeros pasos con esta fant\u00e1stica herramienta. Luego <strong>todo es cuesti\u00f3n de pr\u00e1ctica<\/strong>, con la documentaci\u00f3n de Bootstrap siempre abierta en una pesta\u00f1a de nuestro navegador \ud83d\ude09. <\/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>Una vez has instalado Bootstrap en tu aplicaci\u00f3n React tienes a tu disposici\u00f3n un potente set de componentes y utilidades que te ayudar\u00e1n a desarrollar&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1434,"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-1311","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 usar Bootstrap en Componentes React - CODEvolution<\/title>\n<meta name=\"description\" content=\"Primeros pasos en el uso de componentes y clases de Bootstrap en componentes React.\" \/>\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\/como-usar-bootstrap-en-componentes-react\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo usar Bootstrap en Componentes React - CODEvolution\" \/>\n<meta property=\"og:description\" content=\"Primeros pasos en el uso de componentes y clases de Bootstrap en componentes React.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/\" \/>\n<meta property=\"og:site_name\" content=\"CODEvolution\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-05T03:54:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-20T04:49:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_usar_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=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/\"},\"author\":{\"name\":\"Marta Fag\u00fandez\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1\"},\"headline\":\"C\u00f3mo usar Bootstrap en Componentes React\",\"datePublished\":\"2024-04-05T03:54:10+00:00\",\"dateModified\":\"2024-11-20T04:49:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/\"},\"wordCount\":753,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1\"},\"image\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_usar_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\/como-usar-bootstrap-en-componentes-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/\",\"url\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/\",\"name\":\"C\u00f3mo usar Bootstrap en Componentes React - CODEvolution\",\"isPartOf\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_usar_bootstrap_react-1.jpg\",\"datePublished\":\"2024-04-05T03:54:10+00:00\",\"dateModified\":\"2024-11-20T04:49:32+00:00\",\"description\":\"Primeros pasos en el uso de componentes y clases de Bootstrap en componentes React.\",\"breadcrumb\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/#primaryimage\",\"url\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_usar_bootstrap_react-1.jpg\",\"contentUrl\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_usar_bootstrap_react-1.jpg\",\"width\":950,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/martafagundez.com\/codevolution\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo usar Bootstrap en Componentes 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 usar Bootstrap en Componentes React - CODEvolution","description":"Primeros pasos en el uso de componentes y clases de Bootstrap en componentes React.","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\/como-usar-bootstrap-en-componentes-react\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo usar Bootstrap en Componentes React - CODEvolution","og_description":"Primeros pasos en el uso de componentes y clases de Bootstrap en componentes React.","og_url":"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/","og_site_name":"CODEvolution","article_published_time":"2024-04-05T03:54:10+00:00","article_modified_time":"2024-11-20T04:49:32+00:00","og_image":[{"width":950,"height":500,"url":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_usar_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":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/#article","isPartOf":{"@id":"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/"},"author":{"name":"Marta Fag\u00fandez","@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1"},"headline":"C\u00f3mo usar Bootstrap en Componentes React","datePublished":"2024-04-05T03:54:10+00:00","dateModified":"2024-11-20T04:49:32+00:00","mainEntityOfPage":{"@id":"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/"},"wordCount":753,"commentCount":0,"publisher":{"@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1"},"image":{"@id":"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/#primaryimage"},"thumbnailUrl":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_usar_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\/como-usar-bootstrap-en-componentes-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/","url":"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/","name":"C\u00f3mo usar Bootstrap en Componentes React - CODEvolution","isPartOf":{"@id":"https:\/\/martafagundez.com\/codevolution\/#website"},"primaryImageOfPage":{"@id":"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/#primaryimage"},"image":{"@id":"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/#primaryimage"},"thumbnailUrl":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_usar_bootstrap_react-1.jpg","datePublished":"2024-04-05T03:54:10+00:00","dateModified":"2024-11-20T04:49:32+00:00","description":"Primeros pasos en el uso de componentes y clases de Bootstrap en componentes React.","breadcrumb":{"@id":"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/#primaryimage","url":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_usar_bootstrap_react-1.jpg","contentUrl":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_usar_bootstrap_react-1.jpg","width":950,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/martafagundez.com\/codevolution\/como-usar-bootstrap-en-componentes-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/martafagundez.com\/codevolution\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo usar Bootstrap en Componentes 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_usar_bootstrap_react-1.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts\/1311","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=1311"}],"version-history":[{"count":11,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts\/1311\/revisions"}],"predecessor-version":[{"id":1350,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts\/1311\/revisions\/1350"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/media\/1434"}],"wp:attachment":[{"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/media?parent=1311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/categories?post=1311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/tags?post=1311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}