Saltar al contenido principal Saltar a la navegación de la documentación
Ver en GitHub

Personalizar

Aprende a crear temas, personalizar y ampliar Bootstrap con Sass, una gran cantidad de opciones globales, un sistema de color expansivo y más.

Sass Utiliza nuestros archivos fuente Sass para aprovechar variables, mapas, mixins y funciones.
Opciones Personaliza Bootstrap con variables integradas para alternar fácilmente las preferencias globales de CSS.
Color Aprende y personaliza los sistemas de color que respaldan todo el conjunto de herramientas.
Modos de color Explora nuestro modo claro predeterminado y el nuevo modo oscuro, o crea tú mismo modos de color personalizados.
Componentes Aprende cómo construimos casi todos nuestros componentes de manera responsive y con clases base y modificadoras.
Variables CSS Usa las propiedades personalizadas CSS de Bootstrap para un diseño y desarrollo rápido y con visión de futuro.
Optimizar Mantén tus proyectos ágiles, responsive y mantenibles para que puedas ofrecer la mejor experiencia.

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 utilizando, la compatibilidad del 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 nuestro 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 algunas pautas sobre cómo usar Bootstrap con tu propio compilador Sass.

Para aquellos que quieran utilizar los archivos de distribución, revisa la página de introducción para conocer cómo incluir esos archivos y una página HTML de ejemplo. Desde allí, consulta la documentación para conocer el diseño, los componentes y los comportamientos que te gustaría utilizar.

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 usar y cambiar nuestro sistema de color, cómo construimos nuestros componentes, cómo usar nuestro lista cada vez mayor de propiedades personalizadas de CSS y cómo optimizar tu código al compilar con Bootstrap.

CSP y SVG integrados

Varios componentes de Bootstrap incluyen SVG integrados 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 tus opciones.

Basado en la conversación comunitaria, algunas opciones para abordar esto en tu propia base de código incluye 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.