Skip to main content Skip to docs navigation

Personalizar

Aprende a crear temas, personalizar y ampliar Bootstrap con Sass, un montón de opciones globales, un amplio sistema de colores y más.

Descripción general

Hay varias formas de personalizar Bootstrap. Tu mejor camino puede depender de tu proyecto, la complejidad de tus herramientas de compilación, la versión de Bootstrap que estás usando, la compatibilidad con el navegador y más.

Nuestros dos métodos preferidos son:

  1. Usar Bootstrap a través del administrador de paquetes para que puedas usar y ampliar nuestros archivos fuente.
  2. Usar los archivos de distribución compilados de Bootstrap o jsDelivr para que puedas agregar o sobrescribir los estilos de Bootstrap.

Si bien no podemos entrar en detalles aquí sobre cómo usar cada administrador de paquetes, podemos brindarte orientación sobre el uso de Bootstrap con su propio compilador Sass.

Para aquellos que quieran usar los archivos de distribución, revisen la página de inicio para saber cómo incluir esos archivos y una página HTML de ejemplo. A partir de ahí, consulta los documentos para conocer el diseño, los componentes y los comportamientos que te gustaría usar.

A medida que te familiarices con Bootstrap, continúa explorando esta sección para obtener más detalles sobre cómo utilizar nuestras opciones globales, cómo cambiar nuestro sistema de color, cómo construimos nuestros componentes, cómo usar nuestra creciente lista de propiedades personalizadas de CSS y cómo optimizar tu código al construir con Bootstrap.

CSP y SVG integrados

Varios componentes de Bootstrap incluyen SVG incrustados en nuestro CSS para diseñar componentes de manera consistente y sencilla en todos los navegadores y dispositivos. Para organizaciones con configuraciones de CSP más estrictas, hemos documentado todas las instancias de nuestros SVG integrados (todos los cuales se aplican a través de background-image) para que puedas revisar más a fondo sus opciones.

Según la conversación de la comunidad, algunas opciones para abordar esto en tu propio código base incluyen reemplazar las URL con assets alojados localmente, eliminar las imágenes y usar imágenes en línea (no es posible en todos los componentes), y modificando tu CSP. Nuestra recomendación es revisar cuidadosamente tus propias políticas de seguridad y decidir cuál es el mejor camino a seguir, si es necesario.