{"id":1273,"date":"2024-04-12T23:06:06","date_gmt":"2024-04-13T02:06:06","guid":{"rendered":"https:\/\/martafagundez.com\/codevolution\/?p=1273"},"modified":"2024-11-20T01:49:50","modified_gmt":"2024-11-20T04:49:50","slug":"como-personalizar-bootstrap","status":"publish","type":"post","link":"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/","title":{"rendered":"C\u00f3mo Personalizar Bootstrap"},"content":{"rendered":"\n<p>Para desarrollar sitios web con una <strong>identidad visual \u00fanica que los haga destacar y diferenciarse<\/strong>, podemos usar Bootstrap en conjunto con <strong>estilos CSS propios<\/strong> desarrollados exclusivamente para nuestro sitio web.<\/p>\n\n\n\n<p>Pero adem\u00e1s, en lugar de limitarnos a sus estilos predeterminados, Bootstrap nos permite modificarlos y ampliarlos.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/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=\"#personalizar-bootstrap-vs-estilos-propios\">Personalizar Bootstrap vs Estilos Propios<\/a>\n\n\n<\/li>\n\n<li><a href=\"#instalar-bootstrap\">Instalar Bootstrap<\/a>\n\n<\/li>\n<li><a href=\"#instalar-compilador-scss\">Instalar compilador Scss<\/a>\n\n<\/li>\n<li><a href=\"#crear-archivo-scss\">Crear archivo Scss<\/a>\n\n\n<ul><li>\n<a href=\"#activar-la-compilacion-en-vivo\">Activar la compilaci\u00f3n en vivo<\/a>\n\n<\/li>\n<li><a href=\"#generacion-e-importacion-de-archivo-css\">Generaci\u00f3n e importaci\u00f3n de archivo CSS<\/a>\n\n<\/li>\n<li><a href=\"#importar-los-estilos-de-bootstrap\">Importar los estilos de Bootstrap<\/a>\n\n<\/li>\n<li><a href=\"#modificar-los-colores-del-tema\">Modificar los colores del tema<\/a>\n\n<\/li>\n<li><a href=\"#agregar-colores-al-tema\">Agregar colores al tema<\/a>\n\n<\/li>\n<li><a href=\"#personalizar-un-componente-de-bootstrap\">Personalizar un componente de Bootstrap<\/a>\n\n<\/li>\n<li><a href=\"#personalizar-una-utilidad-de-bootstrap\">Personalizar una utilidad de Bootstrap<\/a>\n\n<\/li>\n<\/ul>\n<li><a href=\"#encontrando-el-equilibrio-personalizacion-y-consistencia\">Encontrando el Equilibrio: Personalizaci\u00f3n y Consistencia<\/a>\n<\/li><\/ul>\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"personalizar-bootstrap-vs-estilos-propios\">Personalizar Bootstrap vs Estilos Propios<\/h2>\n\n\n<p>La decisi\u00f3n de si modificar un componente o utilidad de Bootstrap o crear tus propios estilos CSS depende de varios factores. Lo que sigue son algunas consideraciones que pueden ayudarte a decidir cu\u00e1l enfoque es mejor en diferentes situaciones.<\/p>\n\n\n\n<p><\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"personalizar-bootstrap\">Personalizar Bootstrap:<\/h4>\n\n\n<ul class=\"wp-block-list\">\n<li>Si solo necesitas hacer <strong>cambios menores<\/strong> en el aspecto o comportamiento de un componente o utilidad de Bootstrap, modificar directamente los estilos existentes puede ser la opci\u00f3n m\u00e1s simple y r\u00e1pida.<\/li>\n\n\n\n<li>Si deseas <strong>mantener la consistencia con el dise\u00f1o y la experiencia de usuario de Bootstrap<\/strong> en tu aplicaci\u00f3n, modificar los estilos de Bootstrap puede ser preferible, ya que garantiza que tu aplicaci\u00f3n siga utilizando las convenciones y estilos establecidos por Bootstrap.<\/li>\n\n\n\n<li>Si necesitas <strong>utilizar la funcionalidad existente<\/strong> de un componente o utilidad de Bootstrap, pero con algunos ajustes espec\u00edficos, modificar el componente o utilidad existente puede ser m\u00e1s conveniente que crear uno desde cero.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"crear-tus-propios-estilos-css\">Crear tus propios estilos CSS:<\/h4>\n\n\n<ul class=\"wp-block-list\">\n<li>Si necesitas realizar <strong>cambios significativos<\/strong> en el aspecto o comportamiento de un componente de Bootstrap, puede ser m\u00e1s r\u00e1pido y sencillo crear tus propios estilos CSS.<\/li>\n\n\n\n<li>Si los cambios que deseas realizar en un componente de Bootstrap <strong>podr\u00edan afectar otros componentes o partes de tu aplicaci\u00f3n<\/strong>, puede ser m\u00e1s seguro y limpio crear tus propios estilos CSS para evitar posibles conflictos o efectos no deseados en otras partes de la aplicaci\u00f3n.<\/li>\n\n\n\n<li>Si necesitas un <strong>control m\u00e1s preciso<\/strong> sobre la apariencia y el comportamientos de los elementos en tu aplicaci\u00f3n, crear tus propios estilos CSS te permite ajustar estos estilos de manera m\u00e1s detallada y flexible.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>En resumen, modificar un componente o utilidad de Bootstrap puede ser m\u00e1s apropiado para cambios menores o cuando necesitas mantener la consistencia con Bootstrap, mientras que crear tus propios estilos CSS puede ser preferible para cambios significativos o complejos.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"instalar-bootstrap\">Instalar Bootstrap<\/h2>\n\n\n<p>Existen varias formas de integrar Bootstrap a nuestra aplicaci\u00f3n. Sin embargo, para <strong>personalizar los estilos de Bootstrap mediante Sass<\/strong> (la opci\u00f3n m\u00e1s flexible y potente),<strong> es imprescindible instalarlo en nuestro proyecto<\/strong> mediante un administrador de paquetes (<strong>npm<\/strong>, yarn, etc.).<\/p>\n\n\n\n<p>En <a href=\"https:\/\/martafagundez.com\/codevolution\/instalar-bootstrap-en-react\/\" target=\"_blank\" rel=\"noreferrer noopener\">este post<\/a> puedes acceder a una explicaci\u00f3n m\u00e1s detallada sobre el proceso de instalaci\u00f3n en una aplicaci\u00f3n React, pero aqu\u00ed van los pasos resumidos para <strong>instalar Bootstrap mediante npm<\/strong>:<\/p>\n\n\n\n<p><strong>1 &#8211;<\/strong> Abre una terminal en el directorio ra\u00edz de tu proyecto (el directorio donde se encuentra el archivo <code>package.json<\/code>), y <strong>ejecuta el comando de instalaci\u00f3n<\/strong>:<\/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 i bootstrap@5.3.3\" 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\">i<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #E7EE98\">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:#282A36;color:#ebebe6;font-size:12px;line-height:1;position:relative\">Bash<\/span><\/div>\n\n\n\n<p style=\"font-size:14px\"><em><strong>Nota:<\/strong> obt\u00e9n el comando de instalaci\u00f3n con la versi\u00f3n m\u00e1s actual de Bootstrap desde <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">su sitio web<\/a><\/em>.<\/p>\n\n\n\n<p><strong>2 &#8211;<\/strong> En el archivo de punto de entrada de tu aplicaci\u00f3n (<code>index.js<\/code>, <code>main.jsx<\/code>, <code>main.ts<\/code> por ej.) <strong>importa las funcionalidades Javascript de Bootstrap<\/strong> (m\u00e1s adelante importaremos los estilos CSS):<\/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 '.\/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\"><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><\/p>\n\n\n\n<p><\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"instalar-compilador-scss\">Instalar compilador Scss<\/h2>\n\n\n<p>Una vez instalado Bootstrap, para personalizar sus estilos necesitamos trabajar con un <strong>archivo en formato Scss<\/strong>, por lo tanto tambi\u00e9n necesitaremos un <strong>compilador<\/strong> para compilar dicho c\u00f3digo a c\u00f3digo <strong>CSS<\/strong>.<\/p>\n\n\n\n<p>Puedes usar el compilador de tu preferencia. En este ejemplo voy a usar la extensi\u00f3n <strong>Live Sass Compiler<\/strong> para Visual Studio Code.<\/p>\n\n\n\n<p>Para instalar esta extensi\u00f3n, dir\u00edgete al men\u00fa \u00ab<strong>Extensiones<\/strong>\u00bb y en su buscador escribe \u00ab<strong>live sass compiler<\/strong>\u00ab.<\/p>\n\n\n\n<p>Como puedes ver en la imagen que sigue, el primer resultado es una extensi\u00f3n deprecada. Instala la extensi\u00f3n que ves en la imagen:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a069e5eb1871&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a069e5eb1871\" class=\"wp-block-image size-large is-style-default wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"431\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/instalar_live_sass_compiler-1024x431.jpg\" loading=\"lazy\" alt=\"\" class=\"wp-image-1244\" srcset=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/instalar_live_sass_compiler-1024x431.jpg 1024w, https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/instalar_live_sass_compiler-300x126.jpg 300w, https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/instalar_live_sass_compiler-768x323.jpg 768w, https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/instalar_live_sass_compiler.jpg 1189w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Agrandar\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"crear-archivo-scss\">Crear archivo Scss<\/h2>\n\n\n<p>Al personalizar los estilos de Bootstrap, es conveniente <strong>conservar sus archivos originales sin cambios<\/strong>, por lo que las modificaciones las haremos en un archivo independiente que crearemos para ese fin.<\/p>\n\n\n\n<p>Para ello, en tu aplicaci\u00f3n, dir\u00edgete al directorio donde tienes tus archivos de estilos CSS y crea all\u00ed un nuevo archivo <code>custom.scss<\/code> (o como prefieras llamarlo).<\/p>\n\n\n\n<p><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"activar-la-compilacion-en-vivo\">Activar la compilaci\u00f3n en vivo<\/h3>\n\n\n<p>Una vez creado el archivo, en la parte inferior derecha de la ventana de Visual Studio Code, en la barra de estado, haz click en la opci\u00f3n <strong>\u00abWatch Sass\u00bb para activar la compilaci\u00f3n en vivo<\/strong> de este archivo Scss.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a069e5eb1c69&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a069e5eb1c69\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"581\" height=\"100\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/watch_sass-1.jpg\" loading=\"lazy\" alt=\"\" class=\"wp-image-1249\" srcset=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/watch_sass-1.jpg 581w, https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/watch_sass-1-300x52.jpg 300w\" sizes=\"auto, (max-width: 581px) 100vw, 581px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Agrandar\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"generacion-e-importacion-de-archivo-css\">Generaci\u00f3n e importaci\u00f3n de archivo CSS<\/h3>\n\n\n<p>Cuando guardes los cambios en el archivo Scss, <strong>el compilador generar\u00e1 un archivo<\/strong> con el mismo nombre, pero con formato CSS.<\/p>\n\n\n\n<p>Ten en cuenta que <strong>cada vez que modifiques este archivo Scss<\/strong>, debes asegurarte de que la <strong>compilaci\u00f3n en vivo est\u00e9 activada<\/strong>, de modo que el compilador refleje dichas modificaciones en el archivo CSS vinculado.<\/p>\n\n\n\n<p>Una vez generado el archivo <code>custom.css<\/code>,<strong> tenemos que importarlo<\/strong> en el archivo de punto de entrada de tu aplicaci\u00f3n (donde importamos las funcionalidades Javascript de Bootstrap previamente).<\/p>\n\n\n\n<p>Si tenemos <strong>otra\/s hoja\/s de estilo CSS<\/strong> importadas en este archivo, debemos importar <code>custom.css<\/code> antes:<\/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;.\/custom.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\">.\/custom.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-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><\/p>\n\n\n\n<p><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"importar-los-estilos-de-bootstrap\">Importar los estilos de Bootstrap<\/h3>\n\n\n<p>En este archivo <code>custom.scss<\/code>, lo primero que vamos a hacer es importar los estilos de Bootstrap.<\/p>\n\n\n\n<p>Los estilos de Bootstrap se pueden importar de 2 maneras:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Incluir <strong>todo lo que ofrece Bootstrap<\/strong><\/li>\n\n\n\n<li>Incluir <strong>s\u00f3lo las partes que necesitemos<\/strong><\/li>\n<\/ol>\n\n\n\n<p>Para utilizar la segunda opci\u00f3n tenemos que <strong>tener claro qu\u00e9 partes necesitaremos y de cu\u00e1les podemos prescindir<\/strong>. Para hacer este ejemplo lo m\u00e1s gen\u00e9rico posible vamos a importar todo lo que ofrece Bootstrap:<\/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 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)\">custom.scss<\/span><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ 1. Incluye primero las funciones (para que puedas manipular colores, SVG, c\u00e1lculos, etc.)\n@import &quot;..\/node_modules\/bootstrap\/scss\/functions&quot;;\n\n\/\/ 2. Incluye aqu\u00ed cualquier sobrescritura de variables\n\n\/\/ 3. Incluye el resto de los estilos de Bootstrap que necesites (incluidos los relacionados a los distintos modos de color)\n@import &quot;..\/node_modules\/bootstrap\/scss\/variables&quot;;\n@import &quot;..\/node_modules\/bootstrap\/scss\/variables-dark&quot;;\n\n\/\/ 4. Incluye aqu\u00ed cualquier sobrescritura de mapas\n\n\/\/ 5. Incluye el resto de las partes de Bootstrap\n@import &quot;..\/node_modules\/bootstrap\/scss\/bootstrap&quot;;\n\n\/\/ 6. Agrega c\u00f3digo personalizado adicional aqu\u00ed\" 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: #7B7F8B\">\/\/ 1. Incluye primero las funciones (para que puedas manipular colores, SVG, c\u00e1lculos, etc.)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">@import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/node_modules\/bootstrap\/scss\/functions<\/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: #7B7F8B\">\/\/ 2. Incluye aqu\u00ed cualquier sobrescritura de variables<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B7F8B\">\/\/ 3. Incluye el resto de los estilos de Bootstrap que necesites (incluidos los relacionados a los distintos modos de color)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">@import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/node_modules\/bootstrap\/scss\/variables<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">@import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/node_modules\/bootstrap\/scss\/variables-dark<\/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: #7B7F8B\">\/\/ 4. Incluye aqu\u00ed cualquier sobrescritura de mapas<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B7F8B\">\/\/ 5. Incluye el resto de las partes de Bootstrap<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">@import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/node_modules\/bootstrap\/scss\/bootstrap<\/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: #7B7F8B\">\/\/ 6. Agrega c\u00f3digo personalizado adicional aqu\u00ed<\/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\">SCSS<\/span><\/div>\n\n\n\n<p style=\"font-size:14px\"><em><strong>Nota:<\/strong> recuerda ajustar las rutas de la importaci\u00f3n seg\u00fan la estructura de tu proyecto.<\/em><\/p>\n\n\n\n<p>Una vez importados los estilos de Bootstrap hay una gran variedad de opciones para personalizar sus componentes y utilidades, pero en este post te voy a compartir c\u00f3mo realizo algunas de las que considero m\u00e1s comunes y \u00fatiles.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#fcb9003d\"><strong><span style=\"text-decoration: underline;\">Importante<\/span><\/strong><br>En los archivos Scss <strong>el orden en el que importamos y sobrescribimos las variables es muy importante<\/strong>. Presta especial atenci\u00f3n en respetar el orden presentado en los ejemplos.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"modificar-los-colores-del-tema\">Modificar los colores del tema<\/h3>\n\n\n<p>En el archivo <code>_variables.scss<\/code> de Bootstrap podr\u00e1s ver todas las variables vinculadas a los colores, y tambi\u00e9n el mapa <code>$theme-colors<\/code> que contiene las <strong>variables vinculadas a los colores del tema<\/strong> y sus valores por defecto:<\/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 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)\">_variables.scss<\/span><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/...resto del c\u00f3digo\n$theme-colors: (\n  &quot;primary&quot;:    $primary,\n  &quot;secondary&quot;:  $secondary,\n  &quot;success&quot;:    $success,\n  &quot;info&quot;:       $info,\n  &quot;warning&quot;:    $warning,\n  &quot;danger&quot;:     $danger,\n  &quot;light&quot;:      $light,\n  &quot;dark&quot;:       $dark\n) !default;\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: #7B7F8B\">\/\/...resto del c\u00f3digo<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">$theme-colors<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">primary<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">:    $primary,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">secondary<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">:  $secondary,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">success<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">:    $success,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">info<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">:       $info,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">warning<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">:    $warning,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">danger<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">:     $danger,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">light<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">:      $light,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">dark<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">:       $dark<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">) <\/span><span style=\"color: #F286C4\">!default<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7B7F8B\">\/\/ ...resto del c\u00f3digo<\/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\">SCSS<\/span><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>Puedes modificar el valor de alguna o de todas esas variables (en el archivo <code>custom.scss<\/code>), para personalizar los colores del tema por defecto de Bootstrap. En este ejemplo lo vamos a hacer con las variables <code>$primary<\/code> y <code>$secondary<\/code>:<\/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)\">custom.scss<\/span><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ 1. Incluye primero las funciones (para que puedas manipular colores, SVG, c\u00e1lculos, etc.)\n@import &quot;..\/node_modules\/bootstrap\/scss\/functions&quot;;\n\n\/\/ 2. Incluye aqu\u00ed cualquier sobrescritura de variables\n$primary: rgba(126, 162, 152, 1);\n$secondary: rgba(227, 222, 215, 1);\n\n\/\/ 3. Incluye el resto de los estilos de Bootstrap que necesites (incluidos los relacionados a los distintos modos de color)\n@import &quot;..\/node_modules\/bootstrap\/scss\/variables&quot;;\n@import &quot;..\/node_modules\/bootstrap\/scss\/variables-dark&quot;;\n\n\/\/ 4. Incluye aqu\u00ed cualquier sobrescritura de mapas\n\n\/\/ 5. Incluye el resto de las partes de Bootstrap\n@import &quot;..\/node_modules\/bootstrap\/scss\/bootstrap&quot;;\n\n\/\/ 6. Agrega c\u00f3digo personalizado adicional aqu\u00ed\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: #7B7F8B\">\/\/ 1. Incluye primero las funciones (para que puedas manipular colores, SVG, c\u00e1lculos, etc.)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">@import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/node_modules\/bootstrap\/scss\/functions<\/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: #7B7F8B\">\/\/ 2. Incluye aqu\u00ed cualquier sobrescritura de variables<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">$primary<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #97E1F1\">rgba<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #BF9EEE\">126<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">162<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">152<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">1<\/span><span style=\"color: #F6F6F4\">);<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">$secondary<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #97E1F1\">rgba<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #BF9EEE\">227<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">222<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">215<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">1<\/span><span style=\"color: #F6F6F4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B7F8B\">\/\/ 3. Incluye el resto de los estilos de Bootstrap que necesites (incluidos los relacionados a los distintos modos de color)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">@import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/node_modules\/bootstrap\/scss\/variables<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">@import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/node_modules\/bootstrap\/scss\/variables-dark<\/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: #7B7F8B\">\/\/ 4. Incluye aqu\u00ed cualquier sobrescritura de mapas<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B7F8B\">\/\/ 5. Incluye el resto de las partes de Bootstrap<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">@import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/node_modules\/bootstrap\/scss\/bootstrap<\/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: #7B7F8B\">\/\/ 6. Agrega c\u00f3digo personalizado adicional aqu\u00ed<\/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\">SCSS<\/span><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Ahora vamos a utilizar estos colores<\/strong>. Usar\u00e9 como ejemplo un componente React, ajusta su uso a la tecnolog\u00eda que est\u00e9s utilizando en tu proyecto (Angular, Javascript vanilla, etc): <\/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 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;div className=&quot;card&quot; style={{width: &quot;22rem&quot;}}&gt;\n          &lt;div className=&quot;card-header text-uppercase fs-5 bg-secondary&quot;&gt;\n            Secondary BG\n          &lt;\/div&gt;\n\n          &lt;div className=&quot;card-body&quot;&gt;\n            &lt;p className=&quot;card-text&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.&lt;\/p&gt;\n            &lt;a href=&quot;#&quot; className=&quot;btn btn-primary&quot;&gt;Primary Button&lt;\/a&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n  )\n}\n\nexport default App;\n\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\"><\/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\">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\">card<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">style<\/span><span style=\"color: #F286C4\">={<\/span><span style=\"color: #F6F6F4\">{width<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">22rem<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">}<\/span><span style=\"color: #F286C4\">}<\/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\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">card-header text-uppercase fs-5 bg-secondary<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">            Secondary BG<\/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>\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\">card-body<\/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\">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\">card-text<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.&lt;\/<\/span><span style=\"color: #F286C4\">p<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">            &lt;<\/span><span style=\"color: #F286C4\">a<\/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\"> <\/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-primary<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;Primary Button&lt;\/<\/span><span style=\"color: #F286C4\">a<\/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\">        &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>\n<span class=\"line\"><\/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><\/p>\n\n\n\n<p>As\u00ed se ver\u00eda antes este componente antes y despu\u00e9s de personalizar los colores del tema, manteniendo exactamente el mismo c\u00f3digo:<\/p>\n\n\n\n<div class=\"wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-e77a9455 wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"483\" height=\"302\" src=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/antes.jpg\" loading=\"lazy\" alt=\"\" class=\"wp-image-1368\" style=\"width:348px;height:auto\" srcset=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/antes.jpg 483w, https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/antes-300x188.jpg 300w\" sizes=\"auto, (max-width: 483px) 100vw, 483px\" \/><figcaption class=\"wp-element-caption\">Antes<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"483\" height=\"302\" src=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/despues.jpg\" loading=\"lazy\" alt=\"\" class=\"wp-image-1369\" style=\"width:348px\" srcset=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/despues.jpg 483w, https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/despues-300x188.jpg 300w\" sizes=\"auto, (max-width: 483px) 100vw, 483px\" \/><figcaption class=\"wp-element-caption\">Despu\u00e9s<\/figcaption><\/figure>\n<\/div>\n\n\n\n<p><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"agregar-colores-al-tema\">Agregar colores al tema<\/h3>\n\n\n<p>Adem\u00e1s de modificar los colores por defecto que incluye el tema de Bootstrap, podemos <strong>agregar nuestros propios colores adicionales<\/strong> de la siguiente manera:<\/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)\">custom.scss<\/span><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ 1. Incluye primero las funciones (para que puedas manipular colores, SVG, c\u00e1lculos, etc.)\n@import &quot;..\/node_modules\/bootstrap\/scss\/functions&quot;;\n\n\/\/ 2. Incluye aqu\u00ed cualquier sobrescritura de variables\n$primary: rgba(126, 162, 152, 1);\n$secondary: rgba(227, 222, 215, 1);\n\n\/\/ 3. Incluye el resto de los estilos de Bootstrap que necesites (incluidos los relacionados a los distintos modos de color)\n@import &quot;..\/node_modules\/bootstrap\/scss\/variables&quot;;\n@import &quot;..\/node_modules\/bootstrap\/scss\/variables-dark&quot;;\n\n\/\/ 4. Incluye aqu\u00ed cualquier sobrescritura de mapas\n\/\/ Crear un mapa con colores adicionales\n$custom-colors: (\n  &quot;accent&quot;: #f7ce65,\n  &quot;neutral-60&quot;: #d0cfcd,\n  &quot;neutral-40&quot;: #f2f0ea,\n);\n\n\/\/ Agregar los colores adicionales a los colores del tema\n$theme-colors: map-merge($theme-colors, $custom-colors);\n\n\/\/ 5. Incluye el resto de las partes de Bootstrap\n@import &quot;..\/node_modules\/bootstrap\/scss\/bootstrap&quot;;\n\n\/\/ 6. Agrega c\u00f3digo personalizado adicional aqu\u00ed\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: #7B7F8B\">\/\/ 1. Incluye primero las funciones (para que puedas manipular colores, SVG, c\u00e1lculos, etc.)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">@import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/node_modules\/bootstrap\/scss\/functions<\/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: #7B7F8B\">\/\/ 2. Incluye aqu\u00ed cualquier sobrescritura de variables<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">$primary<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #97E1F1\">rgba<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #BF9EEE\">126<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">162<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">152<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">1<\/span><span style=\"color: #F6F6F4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">$secondary<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #97E1F1\">rgba<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #BF9EEE\">227<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">222<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">215<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">1<\/span><span style=\"color: #F6F6F4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B7F8B\">\/\/ 3. Incluye el resto de los estilos de Bootstrap que necesites (incluidos los relacionados a los distintos modos de color)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">@import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/node_modules\/bootstrap\/scss\/variables<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">@import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/node_modules\/bootstrap\/scss\/variables-dark<\/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: #7B7F8B\">\/\/ 4. Incluye aqu\u00ed cualquier sobrescritura de mapas<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #7B7F8B\">\/\/ Crear un mapa con colores adicionales<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">$custom-colors<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> (<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">accent<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">: <\/span><span style=\"color: #BF9EEE\">#f7ce65<\/span><span style=\"color: #F6F6F4\">,<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">neutral-60<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">: <\/span><span style=\"color: #BF9EEE\">#d0cfcd<\/span><span style=\"color: #F6F6F4\">,<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">neutral-40<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">: <\/span><span style=\"color: #BF9EEE\">#f2f0ea<\/span><span style=\"color: #F6F6F4\">,<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">);<\/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: #7B7F8B\">\/\/ Agregar los colores adicionales a los colores del tema<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">$theme-colors<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #97E1F1\">map-merge<\/span><span style=\"color: #F6F6F4\">($theme-colors, $custom-colors);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B7F8B\">\/\/ 5. Incluye el resto de las partes de Bootstrap<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">@import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/node_modules\/bootstrap\/scss\/bootstrap<\/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: #7B7F8B\">\/\/ 6. Agrega c\u00f3digo personalizado adicional aqu\u00ed<\/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\">SCSS<\/span><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>Ahora podemos utilizar los nombres de los colores adicionales (<code>accent<\/code>, <code>neutral-60<\/code> y<code>neutral-40<\/code> en el ejemplo), <strong>de la misma manera que usamos los nombres de los colores por defecto del tema <\/strong>(<code>primary<\/code>, <code>secondary<\/code>, <code>danger<\/code>, etc).<\/p>\n\n\n\n<p>Por ejemplo, volviendo a nuestro componente React, vamos a agregar un bot\u00f3n donde usaremos el color <code>accent<\/code> y le asignaremos el color <code>neutral-40<\/code> al fondo del cuerpo de la card:<\/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;div className=&quot;card&quot; style={{width: &quot;22rem&quot;}}&gt;\n          &lt;div className=&quot;card-header text-uppercase fs-5 bg-secondary&quot;&gt;\n            Secondary BG\n          &lt;\/div&gt;\n\n          &lt;div className=&quot;card-body bg-neutral-40&quot;&gt;\n            &lt;p className=&quot;card-text&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.&lt;\/p&gt;\n            &lt;a href=&quot;#&quot; className=&quot;btn btn-accent me-2&quot;&gt;Accent Button&lt;\/a&gt;\n            &lt;a href=&quot;#&quot; className=&quot;btn btn-primary&quot;&gt;Primary Button&lt;\/a&gt;\n          &lt;\/div&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\">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\">card<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884; font-style: italic\">style<\/span><span style=\"color: #F286C4\">={<\/span><span style=\"color: #F6F6F4\">{width<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">22rem<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">}<\/span><span style=\"color: #F286C4\">}<\/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\">className<\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">card-header text-uppercase fs-5 bg-secondary<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">            Secondary BG<\/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>\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\">card-body bg-neutral-40<\/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\">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\">card-text<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.&lt;\/<\/span><span style=\"color: #F286C4\">p<\/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\">a<\/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\"> <\/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-accent me-2<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;Accent Button&lt;\/<\/span><span style=\"color: #F286C4\">a<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">            &lt;<\/span><span style=\"color: #F286C4\">a<\/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\"> <\/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-primary<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">&gt;Primary Button&lt;\/<\/span><span style=\"color: #F286C4\">a<\/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\">        &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><\/p>\n\n\n\n<p>Y as\u00ed se ver\u00eda el componente con estos cambios:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"483\" height=\"302\" src=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/con_colores_adicionales.jpg\" loading=\"lazy\" alt=\"\" class=\"wp-image-1372\" style=\"width:350px\" srcset=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/con_colores_adicionales.jpg 483w, https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/con_colores_adicionales-300x188.jpg 300w\" sizes=\"auto, (max-width: 483px) 100vw, 483px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"personalizar-un-componente-de-bootstrap\">Personalizar un componente de Bootstrap<\/h3>\n\n\n<p>En la documentaci\u00f3n del <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">sitio web de Bootstrap<\/a> busca el componente que quieres personalizar. All\u00ed podr\u00e1s<strong> obtener informaci\u00f3n sobre las variables y mapas Sass relacionados<\/strong> que puedes utilizar para su personalizaci\u00f3n.<\/p>\n\n\n\n<p>Supongamos que queremos que los botones tengan v\u00e9rtices rectos en vez del redondeado por defecto. Leyendo la documentaci\u00f3n encontramos que <strong>la variable que determina esta propiedad <\/strong>del componente es <code>$btn-border-radius<\/code> por lo que modificamos su valor en <code>custom.scss<\/code>:<\/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)\">custom.scss<\/span><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ 1. Incluye primero las funciones (para que puedas manipular colores, SVG, c\u00e1lculos, etc.)\n@import &quot;..\/node_modules\/bootstrap\/scss\/functions&quot;;\n\n\/\/ 2. Incluye aqu\u00ed cualquier sobrescritura de variables\n$primary: rgba(126, 162, 152, 1);\n$secondary: rgba(227, 222, 215, 1);\n$btn-border-radius: 0;\n\n\/\/ 3. Incluye el resto de los estilos de Bootstrap que necesites (incluidos los relacionados a los distintos modos de color)\n@import &quot;..\/node_modules\/bootstrap\/scss\/variables&quot;;\n@import &quot;..\/node_modules\/bootstrap\/scss\/variables-dark&quot;;\n\n\/\/ 4. Incluye aqu\u00ed cualquier sobrescritura de mapas\n\/\/ Crear un mapa con colores adicionales\n$custom-colors: (\n  &quot;accent&quot;: #f7ce65,\n  &quot;neutral-60&quot;: #d0cfcd,\n  &quot;neutral-40&quot;: #f2f0ea,\n);\n\n\/\/ Agregar los colores adicionales a los colores del tema\n$theme-colors: map-merge($theme-colors, $custom-colors);\n\n\/\/ 5. Incluye el resto de las partes de Bootstrap\n@import &quot;..\/node_modules\/bootstrap\/scss\/bootstrap&quot;;\n\n\/\/ 6. Agrega c\u00f3digo personalizado adicional aqu\u00ed\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: #7B7F8B\">\/\/ 1. Incluye primero las funciones (para que puedas manipular colores, SVG, c\u00e1lculos, etc.)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">@import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/node_modules\/bootstrap\/scss\/functions<\/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: #7B7F8B\">\/\/ 2. Incluye aqu\u00ed cualquier sobrescritura de variables<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">$primary<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #97E1F1\">rgba<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #BF9EEE\">126<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">162<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">152<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">1<\/span><span style=\"color: #F6F6F4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">$secondary<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #97E1F1\">rgba<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #BF9EEE\">227<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">222<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">215<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">1<\/span><span style=\"color: #F6F6F4\">);<\/span><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F6F6F4\">$btn-border-radius<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">0<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B7F8B\">\/\/ 3. Incluye el resto de los estilos de Bootstrap que necesites (incluidos los relacionados a los distintos modos de color)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">@import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/node_modules\/bootstrap\/scss\/variables<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">@import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/node_modules\/bootstrap\/scss\/variables-dark<\/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: #7B7F8B\">\/\/ 4. Incluye aqu\u00ed cualquier sobrescritura de mapas<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7B7F8B\">\/\/ Crear un mapa con colores adicionales<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">$custom-colors<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">accent<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">: <\/span><span style=\"color: #BF9EEE\">#f7ce65<\/span><span style=\"color: #F6F6F4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">neutral-60<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">: <\/span><span style=\"color: #BF9EEE\">#d0cfcd<\/span><span style=\"color: #F6F6F4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">neutral-40<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">: <\/span><span style=\"color: #BF9EEE\">#f2f0ea<\/span><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: #7B7F8B\">\/\/ Agregar los colores adicionales a los colores del tema<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">$theme-colors<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #97E1F1\">map-merge<\/span><span style=\"color: #F6F6F4\">($theme-colors, $custom-colors);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B7F8B\">\/\/ 5. Incluye el resto de las partes de Bootstrap<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">@import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/node_modules\/bootstrap\/scss\/bootstrap<\/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: #7B7F8B\">\/\/ 6. Agrega c\u00f3digo personalizado adicional aqu\u00ed<\/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\">SCSS<\/span><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>Con esta modificaci\u00f3n, el cambio se aplica a <strong>todos los botones estilizados con Bootstrap<\/strong> en la aplicaci\u00f3n:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"515\" height=\"302\" src=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/bordes_rectos.jpg\" loading=\"lazy\" alt=\"\" class=\"wp-image-1377\" style=\"width:350px\" srcset=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/bordes_rectos.jpg 515w, https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/bordes_rectos-300x176.jpg 300w\" sizes=\"auto, (max-width: 515px) 100vw, 515px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"personalizar-una-utilidad-de-bootstrap\">Personalizar una utilidad de Bootstrap<\/h3>\n\n\n<p>En la documentaci\u00f3n del <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">sitio web de Bootstrap<\/a> buscamos la utilidad que deseamos personalizar para <strong>identificar qu\u00e9 variables o mapas Sass necesitamos modificar<\/strong>.<\/p>\n\n\n\n<p>Supongamos que queremos modificar la <strong>utilidad de sombras<\/strong>. En la documentaci\u00f3n encontramos cu\u00e1les son las variables vinculadas y cu\u00e1les son sus valores actuales:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a069e5eb2b40&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a069e5eb2b40\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"827\" height=\"253\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/docs_shadows_variables.jpg\" loading=\"lazy\" alt=\"\" class=\"wp-image-1378\" srcset=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/docs_shadows_variables.jpg 827w, https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/docs_shadows_variables-300x92.jpg 300w, https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/docs_shadows_variables-768x235.jpg 768w\" sizes=\"auto, (max-width: 827px) 100vw, 827px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Agrandar\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Con esta informaci\u00f3n podemos asignar nuevos valores a alguna o a todas esas variables en nuestro archivo <code>custom.scss<\/code>: <\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers 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)\">custom.scss<\/span><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ 1. Incluye primero las funciones (para que puedas manipular colores, SVG, c\u00e1lculos, etc.)\n@import &quot;..\/node_modules\/bootstrap\/scss\/functions&quot;;\n\n\/\/ 2. Incluye aqu\u00ed cualquier sobrescritura de variables\n$primary: rgba(126, 162, 152, 1);\n$secondary: rgba(227, 222, 215, 1);\n$btn-border-radius: 0;\n\n\/\/ 3. Incluye el resto de los estilos de Bootstrap que necesites (incluidos los relacionados a los distintos modos de color)\n@import &quot;..\/node_modules\/bootstrap\/scss\/variables&quot;;\n@import &quot;..\/node_modules\/bootstrap\/scss\/variables-dark&quot;;\n\n$box-shadow-sm: 0 3px 6px rgba($black, 0.14), 0 3px 6px rgba($black, 0.2);\n$box-shadow: 0 10px 20px rgba($black, 0.15), 0 6px 6px rgba($black, 0.2);\n$box-shadow-lg: 0 14px 28px rgba($black, 0.2), 0 10px 10px rgba($black, 0.2);\n\n\/\/ 4. Incluye aqu\u00ed cualquier sobrescritura de mapas\n\/\/ Crear un mapa con colores adicionales\n$custom-colors: (\n  &quot;accent&quot;: #f7ce65,\n  &quot;neutral-60&quot;: #d0cfcd,\n  &quot;neutral-40&quot;: #f2f0ea,\n);\n\n\/\/ Agregar los colores adicionales a los colores del tema\n$theme-colors: map-merge($theme-colors, $custom-colors);\n\n\/\/ 5. Incluye el resto de las partes de Bootstrap\n@import &quot;..\/node_modules\/bootstrap\/scss\/bootstrap&quot;;\n\n\/\/ 6. Agrega c\u00f3digo personalizado adicional aqu\u00ed\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: #7B7F8B\">\/\/ 1. Incluye primero las funciones (para que puedas manipular colores, SVG, c\u00e1lculos, etc.)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">@import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/node_modules\/bootstrap\/scss\/functions<\/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: #7B7F8B\">\/\/ 2. Incluye aqu\u00ed cualquier sobrescritura de variables<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">$primary<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #97E1F1\">rgba<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #BF9EEE\">126<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">162<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">152<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">1<\/span><span style=\"color: #F6F6F4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">$secondary<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #97E1F1\">rgba<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #BF9EEE\">227<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">222<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">215<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #BF9EEE\">1<\/span><span style=\"color: #F6F6F4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">$btn-border-radius<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">0<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B7F8B\">\/\/ 3. Incluye el resto de los estilos de Bootstrap que necesites (incluidos los relacionados a los distintos modos de color)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">@import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/node_modules\/bootstrap\/scss\/variables<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">@import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/node_modules\/bootstrap\/scss\/variables-dark<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #F6F6F4\">$box-shadow-sm<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">0<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">3<\/span><span style=\"color: #F286C4\">px<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">6<\/span><span style=\"color: #F286C4\">px<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #97E1F1\">rgba<\/span><span style=\"color: #F6F6F4\">($black, <\/span><span style=\"color: #BF9EEE\">0.14<\/span><span style=\"color: #F6F6F4\">), <\/span><span style=\"color: #BF9EEE\">0<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">3<\/span><span style=\"color: #F286C4\">px<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">6<\/span><span style=\"color: #F286C4\">px<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #97E1F1\">rgba<\/span><span style=\"color: #F6F6F4\">($black, <\/span><span style=\"color: #BF9EEE\">0.2<\/span><span style=\"color: #F6F6F4\">);<\/span><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #F6F6F4\">$box-shadow<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">0<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">10<\/span><span style=\"color: #F286C4\">px<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">20<\/span><span style=\"color: #F286C4\">px<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #97E1F1\">rgba<\/span><span style=\"color: #F6F6F4\">($black, <\/span><span style=\"color: #BF9EEE\">0.15<\/span><span style=\"color: #F6F6F4\">), <\/span><span style=\"color: #BF9EEE\">0<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">6<\/span><span style=\"color: #F286C4\">px<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">6<\/span><span style=\"color: #F286C4\">px<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #97E1F1\">rgba<\/span><span style=\"color: #F6F6F4\">($black, <\/span><span style=\"color: #BF9EEE\">0.2<\/span><span style=\"color: #F6F6F4\">);<\/span><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #F6F6F4\">$box-shadow-lg<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">0<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">14<\/span><span style=\"color: #F286C4\">px<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">28<\/span><span style=\"color: #F286C4\">px<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #97E1F1\">rgba<\/span><span style=\"color: #F6F6F4\">($black, <\/span><span style=\"color: #BF9EEE\">0.2<\/span><span style=\"color: #F6F6F4\">), <\/span><span style=\"color: #BF9EEE\">0<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">10<\/span><span style=\"color: #F286C4\">px<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">10<\/span><span style=\"color: #F286C4\">px<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #97E1F1\">rgba<\/span><span style=\"color: #F6F6F4\">($black, <\/span><span style=\"color: #BF9EEE\">0.2<\/span><span style=\"color: #F6F6F4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B7F8B\">\/\/ 4. Incluye aqu\u00ed cualquier sobrescritura de mapas<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7B7F8B\">\/\/ Crear un mapa con colores adicionales<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">$custom-colors<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">accent<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">: <\/span><span style=\"color: #BF9EEE\">#f7ce65<\/span><span style=\"color: #F6F6F4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">neutral-60<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">: <\/span><span style=\"color: #BF9EEE\">#d0cfcd<\/span><span style=\"color: #F6F6F4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">neutral-40<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">: <\/span><span style=\"color: #BF9EEE\">#f2f0ea<\/span><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: #7B7F8B\">\/\/ Agregar los colores adicionales a los colores del tema<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">$theme-colors<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #97E1F1\">map-merge<\/span><span style=\"color: #F6F6F4\">($theme-colors, $custom-colors);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B7F8B\">\/\/ 5. Incluye el resto de las partes de Bootstrap<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">@import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/node_modules\/bootstrap\/scss\/bootstrap<\/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: #7B7F8B\">\/\/ 6. Agrega c\u00f3digo personalizado adicional aqu\u00ed<\/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\">SCSS<\/span><\/div>\n\n\n\n<p>Si prestas atenci\u00f3n ver\u00e1s que la modificaci\u00f3n de estas variables est\u00e1 <strong>debajo de las l\u00edneas donde se importan las variables<\/strong>. Esto es necesario porque al definir los nuevos valores, se hace uso de la variable Sass <code>$black<\/code>, la cual s\u00f3lo es accesible luego de la importaci\u00f3n de las variables de Bootstrap.<\/p>\n\n\n\n<p>Aqu\u00ed podemos ver la diferencia en los efectos de las sombras de Bootstrap antes y despu\u00e9s de la personalizaci\u00f3n:<\/p>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-e3e06330 wp-block-group-is-layout-flex\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a069e5eb2e2e&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a069e5eb2e2e\" class=\"wp-block-image size-full is-resized wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"628\" height=\"515\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/shadow_antes.jpg\" loading=\"lazy\" alt=\"\" class=\"wp-image-1380\" style=\"width:348px\" srcset=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/shadow_antes.jpg 628w, https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/shadow_antes-300x246.jpg 300w\" sizes=\"auto, (max-width: 628px) 100vw, 628px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Agrandar\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Antes<\/figcaption><\/figure>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a069e5eb302e&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a069e5eb302e\" class=\"wp-block-image size-full is-resized wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"628\" height=\"515\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/shadow_despues.jpg\" loading=\"lazy\" alt=\"\" class=\"wp-image-1381\" style=\"width:348px\" srcset=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/shadow_despues.jpg 628w, https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/shadow_despues-300x246.jpg 300w\" sizes=\"auto, (max-width: 628px) 100vw, 628px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Agrandar\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Despu\u00e9s<\/figcaption><\/figure>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"encontrando-el-equilibrio-personalizacion-y-consistencia\">Encontrando el Equilibrio: Personalizaci\u00f3n y Consistencia<\/h2>\n\n\n<p>La personalizaci\u00f3n es una herramienta poderosa para dar vida a la identidad visual de un sitio web. <strong>Nos permite destacar y diferenciarnos<\/strong>, adaptando el aspecto y el comportamiento de los componentes seg\u00fan nuestras necesidades espec\u00edficas. <\/p>\n\n\n\n<p>Esto es fundamental para crear<strong> experiencias \u00fanicas y atractivas para nuestros usuarios<\/strong>.<\/p>\n\n\n\n<p>Por otro lado, Bootstrap ofrece un conjunto de convenciones bien establecidas que han sido <strong>probadas y optimizadas para garantizar la usabilidad y la accesibilidad<\/strong>. Modificar en exceso estos patrones puede conducir a una experiencia fragmentada y confusa para los usuarios.<\/p>\n\n\n\n<p>Por lo tanto, al personalizar Bootstrap, es importante mantener la coherencia con sus principios de dise\u00f1o y <strong>considerar cuidadosamente c\u00f3mo cada cambio afecta la experiencia del usuario<\/strong>. <\/p>\n\n\n\n<p>Buscar un equilibrio entre la personalizaci\u00f3n creativa y la consistencia con las convenciones de Bootstrap nos permite <strong>aprovechar al m\u00e1ximo las ventajas de ambos enfoques<\/strong>, creando sitios web visualmente atractivos y funcionales.<\/p>\n\n\n\n<p>En \u00faltima instancia, <strong>la clave est\u00e1 en entender las necesidades y expectativas de nuestros usuarios<\/strong>, y utilizar la personalizaci\u00f3n de manera estrat\u00e9gica para satisfacer esas demandas, sin comprometer la usabilidad ni la coherencia de la interfaz.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Para desarrollar sitios web con una identidad visual \u00fanica que los haga destacar y diferenciarse, podemos usar Bootstrap en conjunto con estilos CSS propios desarrollados&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1431,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"[]"},"categories":[37,18,42,38],"tags":[34],"class_list":["post-1273","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","category-css","category-desarrollo-web","category-frontend","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 Personalizar Bootstrap - CODEvolution<\/title>\n<meta name=\"description\" content=\"Para desarrollar sitios web con una identidad visual \u00fanica que los haga destacar y diferenciarse, podemos personalizar los estilos por defecto de Bootstrap adem\u00e1s de desarrollar estilos CSS propios.\" \/>\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-personalizar-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo Personalizar Bootstrap - CODEvolution\" \/>\n<meta property=\"og:description\" content=\"Para desarrollar sitios web con una identidad visual \u00fanica que los haga destacar y diferenciarse, podemos personalizar los estilos por defecto de Bootstrap adem\u00e1s de desarrollar estilos CSS propios.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"CODEvolution\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-13T02:06:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-20T04:49:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_personalizar_bootstrap_standard.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=\"10 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/\"},\"author\":{\"name\":\"Marta Fag\u00fandez\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1\"},\"headline\":\"C\u00f3mo Personalizar Bootstrap\",\"datePublished\":\"2024-04-13T02:06:06+00:00\",\"dateModified\":\"2024-11-20T04:49:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/\"},\"wordCount\":1710,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1\"},\"image\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_personalizar_bootstrap_standard.jpg\",\"keywords\":[\"Front End\"],\"articleSection\":[\"Bootstrap\",\"CSS\",\"Desarrollo Web\",\"Front End\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/\",\"url\":\"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/\",\"name\":\"C\u00f3mo Personalizar Bootstrap - CODEvolution\",\"isPartOf\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_personalizar_bootstrap_standard.jpg\",\"datePublished\":\"2024-04-13T02:06:06+00:00\",\"dateModified\":\"2024-11-20T04:49:50+00:00\",\"description\":\"Para desarrollar sitios web con una identidad visual \u00fanica que los haga destacar y diferenciarse, podemos personalizar los estilos por defecto de Bootstrap adem\u00e1s de desarrollar estilos CSS propios.\",\"breadcrumb\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/#primaryimage\",\"url\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_personalizar_bootstrap_standard.jpg\",\"contentUrl\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_personalizar_bootstrap_standard.jpg\",\"width\":950,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/martafagundez.com\/codevolution\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo Personalizar Bootstrap\"}]},{\"@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 Personalizar Bootstrap - CODEvolution","description":"Para desarrollar sitios web con una identidad visual \u00fanica que los haga destacar y diferenciarse, podemos personalizar los estilos por defecto de Bootstrap adem\u00e1s de desarrollar estilos CSS propios.","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-personalizar-bootstrap\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo Personalizar Bootstrap - CODEvolution","og_description":"Para desarrollar sitios web con una identidad visual \u00fanica que los haga destacar y diferenciarse, podemos personalizar los estilos por defecto de Bootstrap adem\u00e1s de desarrollar estilos CSS propios.","og_url":"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/","og_site_name":"CODEvolution","article_published_time":"2024-04-13T02:06:06+00:00","article_modified_time":"2024-11-20T04:49:50+00:00","og_image":[{"width":950,"height":500,"url":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_personalizar_bootstrap_standard.jpg","type":"image\/jpeg"}],"author":"Marta Fag\u00fandez","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Marta Fag\u00fandez","Tiempo de lectura":"10 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/#article","isPartOf":{"@id":"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/"},"author":{"name":"Marta Fag\u00fandez","@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1"},"headline":"C\u00f3mo Personalizar Bootstrap","datePublished":"2024-04-13T02:06:06+00:00","dateModified":"2024-11-20T04:49:50+00:00","mainEntityOfPage":{"@id":"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/"},"wordCount":1710,"commentCount":0,"publisher":{"@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1"},"image":{"@id":"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_personalizar_bootstrap_standard.jpg","keywords":["Front End"],"articleSection":["Bootstrap","CSS","Desarrollo Web","Front End"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/","url":"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/","name":"C\u00f3mo Personalizar Bootstrap - CODEvolution","isPartOf":{"@id":"https:\/\/martafagundez.com\/codevolution\/#website"},"primaryImageOfPage":{"@id":"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_personalizar_bootstrap_standard.jpg","datePublished":"2024-04-13T02:06:06+00:00","dateModified":"2024-11-20T04:49:50+00:00","description":"Para desarrollar sitios web con una identidad visual \u00fanica que los haga destacar y diferenciarse, podemos personalizar los estilos por defecto de Bootstrap adem\u00e1s de desarrollar estilos CSS propios.","breadcrumb":{"@id":"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/#primaryimage","url":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_personalizar_bootstrap_standard.jpg","contentUrl":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_personalizar_bootstrap_standard.jpg","width":950,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/martafagundez.com\/codevolution\/como-personalizar-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/martafagundez.com\/codevolution\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo Personalizar Bootstrap"}]},{"@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_personalizar_bootstrap_standard.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts\/1273","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=1273"}],"version-history":[{"count":38,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts\/1273\/revisions"}],"predecessor-version":[{"id":1404,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts\/1273\/revisions\/1404"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/media\/1431"}],"wp:attachment":[{"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/media?parent=1273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/categories?post=1273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/tags?post=1273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}