Para desarrollar sitios web con una identidad visual única que los haga destacar y diferenciarse, podemos usar Bootstrap en conjunto con estilos CSS propios desarrollados exclusivamente para nuestro sitio web.
Pero además, en lugar de limitarnos a sus estilos predeterminados, Bootstrap nos permite modificarlos y ampliarlos.
Tabla de contenidos
- Personalizar Bootstrap vs Estilos Propios
- Instalar Bootstrap
- Instalar compilador Scss
- Crear archivo Scss
- Encontrando el Equilibrio: Personalización y Consistencia
Personalizar Bootstrap vs Estilos Propios
La decisión 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ál enfoque es mejor en diferentes situaciones.
Personalizar Bootstrap:
- Si solo necesitas hacer cambios menores en el aspecto o comportamiento de un componente o utilidad de Bootstrap, modificar directamente los estilos existentes puede ser la opción más simple y rápida.
- Si deseas mantener la consistencia con el diseño y la experiencia de usuario de Bootstrap en tu aplicación, modificar los estilos de Bootstrap puede ser preferible, ya que garantiza que tu aplicación siga utilizando las convenciones y estilos establecidos por Bootstrap.
- Si necesitas utilizar la funcionalidad existente de un componente o utilidad de Bootstrap, pero con algunos ajustes específicos, modificar el componente o utilidad existente puede ser más conveniente que crear uno desde cero.
Crear tus propios estilos CSS:
- Si necesitas realizar cambios significativos en el aspecto o comportamiento de un componente de Bootstrap, puede ser más rápido y sencillo crear tus propios estilos CSS.
- Si los cambios que deseas realizar en un componente de Bootstrap podrían afectar otros componentes o partes de tu aplicación, puede ser más seguro y limpio crear tus propios estilos CSS para evitar posibles conflictos o efectos no deseados en otras partes de la aplicación.
- Si necesitas un control más preciso sobre la apariencia y el comportamientos de los elementos en tu aplicación, crear tus propios estilos CSS te permite ajustar estos estilos de manera más detallada y flexible.
En resumen, modificar un componente o utilidad de Bootstrap puede ser más 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.
Instalar Bootstrap
Existen varias formas de integrar Bootstrap a nuestra aplicación. Sin embargo, para personalizar los estilos de Bootstrap mediante Sass (la opción más flexible y potente), es imprescindible instalarlo en nuestro proyecto mediante un administrador de paquetes (npm, yarn, etc.).
En este post puedes acceder a una explicación más detallada sobre el proceso de instalación en una aplicación React, pero aquí van los pasos resumidos para instalar Bootstrap mediante npm:
1 – Abre una terminal en el directorio raíz de tu proyecto (el directorio donde se encuentra el archivo package.json), y ejecuta el comando de instalación:
npm i bootstrap@5.3.3Nota: obtén el comando de instalación con la versión más actual de Bootstrap desde su sitio web.
2 – En el archivo de punto de entrada de tu aplicación (index.js, main.jsx, main.ts por ej.) importa las funcionalidades Javascript de Bootstrap (más adelante importaremos los estilos CSS):
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';
import "bootstrap/dist/js/bootstrap.js";
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)Instalar compilador Scss
Una vez instalado Bootstrap, para personalizar sus estilos necesitamos trabajar con un archivo en formato Scss, por lo tanto también necesitaremos un compilador para compilar dicho código a código CSS.
Puedes usar el compilador de tu preferencia. En este ejemplo voy a usar la extensión Live Sass Compiler para Visual Studio Code.
Para instalar esta extensión, dirígete al menú «Extensiones» y en su buscador escribe «live sass compiler«.
Como puedes ver en la imagen que sigue, el primer resultado es una extensión deprecada. Instala la extensión que ves en la imagen:
Crear archivo Scss
Al personalizar los estilos de Bootstrap, es conveniente conservar sus archivos originales sin cambios, por lo que las modificaciones las haremos en un archivo independiente que crearemos para ese fin.
Para ello, en tu aplicación, dirígete al directorio donde tienes tus archivos de estilos CSS y crea allí un nuevo archivo custom.scss (o como prefieras llamarlo).
Activar la compilación en vivo
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ón «Watch Sass» para activar la compilación en vivo de este archivo Scss.
Generación e importación de archivo CSS
Cuando guardes los cambios en el archivo Scss, el compilador generará un archivo con el mismo nombre, pero con formato CSS.
Ten en cuenta que cada vez que modifiques este archivo Scss, debes asegurarte de que la compilación en vivo esté activada, de modo que el compilador refleje dichas modificaciones en el archivo CSS vinculado.
Una vez generado el archivo custom.css, tenemos que importarlo en el archivo de punto de entrada de tu aplicación (donde importamos las funcionalidades Javascript de Bootstrap previamente).
Si tenemos otra/s hoja/s de estilo CSS importadas en este archivo, debemos importar custom.css antes:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import "./custom.css";
import './index.css';
import "bootstrap/dist/js/bootstrap.js";
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)Importar los estilos de Bootstrap
En este archivo custom.scss, lo primero que vamos a hacer es importar los estilos de Bootstrap.
Los estilos de Bootstrap se pueden importar de 2 maneras:
- Incluir todo lo que ofrece Bootstrap
- Incluir sólo las partes que necesitemos
Para utilizar la segunda opción tenemos que tener claro qué partes necesitaremos y de cuáles podemos prescindir. Para hacer este ejemplo lo más genérico posible vamos a importar todo lo que ofrece Bootstrap:
// 1. Incluye primero las funciones (para que puedas manipular colores, SVG, cálculos, etc.)
@import "../node_modules/bootstrap/scss/functions";
// 2. Incluye aquí cualquier sobrescritura de variables
// 3. Incluye el resto de los estilos de Bootstrap que necesites (incluidos los relacionados a los distintos modos de color)
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
// 4. Incluye aquí cualquier sobrescritura de mapas
// 5. Incluye el resto de las partes de Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
// 6. Agrega código personalizado adicional aquíNota: recuerda ajustar las rutas de la importación según la estructura de tu proyecto.
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ómo realizo algunas de las que considero más comunes y útiles.
Importante
En los archivos Scss el orden en el que importamos y sobrescribimos las variables es muy importante. Presta especial atención en respetar el orden presentado en los ejemplos.
Modificar los colores del tema
En el archivo _variables.scss de Bootstrap podrás ver todas las variables vinculadas a los colores, y también el mapa $theme-colors que contiene las variables vinculadas a los colores del tema y sus valores por defecto:
//...resto del código
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
) !default;
// ...resto del códigoPuedes modificar el valor de alguna o de todas esas variables (en el archivo custom.scss), para personalizar los colores del tema por defecto de Bootstrap. En este ejemplo lo vamos a hacer con las variables $primary y $secondary:
// 1. Incluye primero las funciones (para que puedas manipular colores, SVG, cálculos, etc.)
@import "../node_modules/bootstrap/scss/functions";
// 2. Incluye aquí cualquier sobrescritura de variables
$primary: rgba(126, 162, 152, 1);
$secondary: rgba(227, 222, 215, 1);
// 3. Incluye el resto de los estilos de Bootstrap que necesites (incluidos los relacionados a los distintos modos de color)
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
// 4. Incluye aquí cualquier sobrescritura de mapas
// 5. Incluye el resto de las partes de Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
// 6. Agrega código personalizado adicional aquí
Ahora vamos a utilizar estos colores. Usaré como ejemplo un componente React, ajusta su uso a la tecnología que estés utilizando en tu proyecto (Angular, Javascript vanilla, etc):
import React from "react";
function App() {
return (
<div className="main-container">
<div className="card" style={{width: "22rem"}}>
<div className="card-header text-uppercase fs-5 bg-secondary">
Secondary BG
</div>
<div className="card-body">
<p className="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
<a href="#" className="btn btn-primary">Primary Button</a>
</div>
</div>
</div>
)
}
export default App;
Así se vería antes este componente antes y después de personalizar los colores del tema, manteniendo exactamente el mismo código:
Agregar colores al tema
Además de modificar los colores por defecto que incluye el tema de Bootstrap, podemos agregar nuestros propios colores adicionales de la siguiente manera:
// 1. Incluye primero las funciones (para que puedas manipular colores, SVG, cálculos, etc.)
@import "../node_modules/bootstrap/scss/functions";
// 2. Incluye aquí cualquier sobrescritura de variables
$primary: rgba(126, 162, 152, 1);
$secondary: rgba(227, 222, 215, 1);
// 3. Incluye el resto de los estilos de Bootstrap que necesites (incluidos los relacionados a los distintos modos de color)
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
// 4. Incluye aquí cualquier sobrescritura de mapas
// Crear un mapa con colores adicionales
$custom-colors: (
"accent": #f7ce65,
"neutral-60": #d0cfcd,
"neutral-40": #f2f0ea,
);
// Agregar los colores adicionales a los colores del tema
$theme-colors: map-merge($theme-colors, $custom-colors);
// 5. Incluye el resto de las partes de Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
// 6. Agrega código personalizado adicional aquí
Ahora podemos utilizar los nombres de los colores adicionales (accent, neutral-60 yneutral-40 en el ejemplo), de la misma manera que usamos los nombres de los colores por defecto del tema (primary, secondary, danger, etc).
Por ejemplo, volviendo a nuestro componente React, vamos a agregar un botón donde usaremos el color accent y le asignaremos el color neutral-40 al fondo del cuerpo de la card:
import React from "react";
function App() {
return (
<div className="main-container">
<div className="card" style={{width: "22rem"}}>
<div className="card-header text-uppercase fs-5 bg-secondary">
Secondary BG
</div>
<div className="card-body bg-neutral-40">
<p className="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
<a href="#" className="btn btn-accent me-2">Accent Button</a>
<a href="#" className="btn btn-primary">Primary Button</a>
</div>
</div>
</div>
)
}
export default App;Y así se vería el componente con estos cambios:
Personalizar un componente de Bootstrap
En la documentación del sitio web de Bootstrap busca el componente que quieres personalizar. Allí podrás obtener información sobre las variables y mapas Sass relacionados que puedes utilizar para su personalización.
Supongamos que queremos que los botones tengan vértices rectos en vez del redondeado por defecto. Leyendo la documentación encontramos que la variable que determina esta propiedad del componente es $btn-border-radius por lo que modificamos su valor en custom.scss:
// 1. Incluye primero las funciones (para que puedas manipular colores, SVG, cálculos, etc.)
@import "../node_modules/bootstrap/scss/functions";
// 2. Incluye aquí cualquier sobrescritura de variables
$primary: rgba(126, 162, 152, 1);
$secondary: rgba(227, 222, 215, 1);
$btn-border-radius: 0;
// 3. Incluye el resto de los estilos de Bootstrap que necesites (incluidos los relacionados a los distintos modos de color)
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
// 4. Incluye aquí cualquier sobrescritura de mapas
// Crear un mapa con colores adicionales
$custom-colors: (
"accent": #f7ce65,
"neutral-60": #d0cfcd,
"neutral-40": #f2f0ea,
);
// Agregar los colores adicionales a los colores del tema
$theme-colors: map-merge($theme-colors, $custom-colors);
// 5. Incluye el resto de las partes de Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
// 6. Agrega código personalizado adicional aquí
Con esta modificación, el cambio se aplica a todos los botones estilizados con Bootstrap en la aplicación:
Personalizar una utilidad de Bootstrap
En la documentación del sitio web de Bootstrap buscamos la utilidad que deseamos personalizar para identificar qué variables o mapas Sass necesitamos modificar.
Supongamos que queremos modificar la utilidad de sombras. En la documentación encontramos cuáles son las variables vinculadas y cuáles son sus valores actuales:
Con esta información podemos asignar nuevos valores a alguna o a todas esas variables en nuestro archivo custom.scss:
// 1. Incluye primero las funciones (para que puedas manipular colores, SVG, cálculos, etc.)
@import "../node_modules/bootstrap/scss/functions";
// 2. Incluye aquí cualquier sobrescritura de variables
$primary: rgba(126, 162, 152, 1);
$secondary: rgba(227, 222, 215, 1);
$btn-border-radius: 0;
// 3. Incluye el resto de los estilos de Bootstrap que necesites (incluidos los relacionados a los distintos modos de color)
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
$box-shadow-sm: 0 3px 6px rgba($black, 0.14), 0 3px 6px rgba($black, 0.2);
$box-shadow: 0 10px 20px rgba($black, 0.15), 0 6px 6px rgba($black, 0.2);
$box-shadow-lg: 0 14px 28px rgba($black, 0.2), 0 10px 10px rgba($black, 0.2);
// 4. Incluye aquí cualquier sobrescritura de mapas
// Crear un mapa con colores adicionales
$custom-colors: (
"accent": #f7ce65,
"neutral-60": #d0cfcd,
"neutral-40": #f2f0ea,
);
// Agregar los colores adicionales a los colores del tema
$theme-colors: map-merge($theme-colors, $custom-colors);
// 5. Incluye el resto de las partes de Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
// 6. Agrega código personalizado adicional aquí
Si prestas atención verás que la modificación de estas variables está debajo de las líneas donde se importan las variables. Esto es necesario porque al definir los nuevos valores, se hace uso de la variable Sass $black, la cual sólo es accesible luego de la importación de las variables de Bootstrap.
Aquí podemos ver la diferencia en los efectos de las sombras de Bootstrap antes y después de la personalización:
Encontrando el Equilibrio: Personalización y Consistencia
La personalización es una herramienta poderosa para dar vida a la identidad visual de un sitio web. Nos permite destacar y diferenciarnos, adaptando el aspecto y el comportamiento de los componentes según nuestras necesidades específicas.
Esto es fundamental para crear experiencias únicas y atractivas para nuestros usuarios.
Por otro lado, Bootstrap ofrece un conjunto de convenciones bien establecidas que han sido probadas y optimizadas para garantizar la usabilidad y la accesibilidad. Modificar en exceso estos patrones puede conducir a una experiencia fragmentada y confusa para los usuarios.
Por lo tanto, al personalizar Bootstrap, es importante mantener la coherencia con sus principios de diseño y considerar cuidadosamente cómo cada cambio afecta la experiencia del usuario.
Buscar un equilibrio entre la personalización creativa y la consistencia con las convenciones de Bootstrap nos permite aprovechar al máximo las ventajas de ambos enfoques, creando sitios web visualmente atractivos y funcionales.
En última instancia, la clave está en entender las necesidades y expectativas de nuestros usuarios, y utilizar la personalización de manera estratégica para satisfacer esas demandas, sin comprometer la usabilidad ni la coherencia de la interfaz.