Variables CSS

Bootstrap incluye muchas propiedades personalizadas de CSS (variables) en su CSS compilado para personalización en tiempo real sin necesidad de recompilar Sass. Estas proporcionan acceso fácil a valores comúnmente usados como nuestros colores del tema, breakpoints, y pilas de fuentes principales cuando trabajas en el inspector de tu navegador, un sandbox de código, o prototipado general.

Todas nuestras propiedades personalizadas tienen el prefijo bs- para evitar conflictos con CSS de terceros.

Variables raíz

Aquí están las variables que incluimos (ten en cuenta que :root es obligatorio) a las que se puede acceder desde cualquier lugar donde se cargue el CSS de Bootstrap. Se encuentran en nuestro archivo _root.scss y se incluyen en nuestros archivos dist compilados.

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

Variables de componentes

Bootstrap 5 está haciendo un uso cada vez mayor de propiedades personalizadas como variables locales para varios componentes. De esta manera reducimos nuestro CSS compilado, aseguramos que los estilos no se hereden en lugares como tablas anidadas, y permitimos un rediseño básico y la extensión de los componentes de Bootstrap después de la compilación de Sass.

Echa un vistazo a nuestra documentación de tablas para obtener algo de perspectiva sobre cómo estamos usando variables CSS. Nuestras navbars también usan variables CSS a partir de v5.2.0. También estamos usando variables CSS en nuestras cuadrículas—principalmente para los gutters en la nueva cuadrícula CSS opcional—con más uso en componentes en el futuro.

Siempre que sea posible, asignaremos variables CSS a nivel del componente base (p. ej., .navbar para navbar y sus subcomponentes). Esto reduce las conjeturas sobre dónde y cómo personalizar, y permite modificaciones fáciles por parte de nuestro equipo en futuras actualizaciones.

Prefijo

La mayoría de las variables CSS usan un prefijo para evitar colisiones con tu propio código. Este prefijo se añade al -- que es obligatorio en cada variable CSS.

Personaliza el prefijo mediante la variable Sass $prefix. Por defecto, está establecido en bs- (nota el guion final).

Ejemplos

Las variables de CSS ofrecen una flexibilidad similar a las variables de Sass, pero sin necesidad de compilación antes de servirse al navegador. Por ejemplo, aquí estamos reestableciendo la fuente y los estilos de los enlaces de nuestra página con variables de CSS.

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}

Puntos de interrupción de la cuadrícula

Aunque incluimos nuestros puntos de interrupción de cuadrícula como variables CSS (excepto para xs), ten en cuenta que las variables CSS no funcionan en media queries. Esto es por diseño en la especificación CSS para variables, pero puede cambiar en los próximos años con el soporte para variables env(). Revisa esta respuesta de Stack Overflow para algunos enlaces útiles. Mientras tanto, puedes usar estas variables en otras situaciones CSS, así como en tu JavaScript.