Bootstrap 5.3 ofrece soporte sólido para los navegadores y plataformas más utilizados actualmente.
n este artículo, exploramos en detalle qué navegadores y dispositivos son compatibles, qué comportamientos inesperados pueden surgir en móviles y cuáles son las recomendaciones del equipo de Bootstrap.
Navegadores compatibles
Bootstrap es compatible con las últimas versiones estables de todos los navegadores principales.
Esto incluye:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Safari
- Opera
Bootstrap se basa en Autoprefixer y Browserslist para definir la compatibilidad, a través de su archivo .browserslistrc el cual contiene:
>= 0.5%
last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
Firefox ESR
iOS >= 12
Safari >= 12
not Explorer <= 11
not kaios <= 2.5
Esto significa que Bootstrap no da soporte a navegadores obsoletos ni a plataformas marginales como Internet Explorer o KaiOS.
Compatibilidad con dispositivos móviles
Bootstrap garantiza un funcionamiento correcto en las versiones recientes de los navegadores móviles más populares.
A continuación, se muestra una tabla de compatibilidad:
| Sistema | Chrome | Firefox | Safari | Navegador Android/WebView |
|---|---|---|---|---|
| Android | Soportado | Soportado | — | v6.0 o superior |
| iOS | Soportado | Soportado | Soportado | — |
Nota: Navegadores proxy como Opera Mini, UC Browser Mini o Amazon Silk no son compatibles oficialmente.
Compatibilidad con navegadores de escritorio
Bootstrap también soporta los navegadores de escritorio más recientes, tanto en Windows como en macOS:
| Sistema | Chrome | Firefox | Edge | Opera | Safari |
|---|---|---|---|---|---|
| macOS | Soportado | Soportado | Soportado | Soportado | Soportado |
| Windows | Soportado | Soportado | Soportado | Soportado | — |
En el caso de Firefox, se da soporte tanto a la última versión estable como a la versión Extended Support Release (ESR).
Compatibilidad con Internet Explorer
Internet Explorer no es compatible con Bootstrap 5.3. Si tu proyecto necesita funcionar en IE, se recomienda usar Bootstrap 4.
Problemas conocidos con dispositivos móviles
1. Modales y desplazamiento
En iOS y Android, el estilo overflow: hidden aplicado al <body> tiene soporte limitado.
Esto puede causar que al desplazarse dentro de un modal, el contenido de fondo también se desplace.
2. Campos de texto en iOS
En iOS 9.2 y versiones superiores, si se toca un <input> o <textarea> dentro de un modal, el desplazamiento puede afectar al fondo en lugar del modal. Esto se debe a un bug de WebKit.
3. Menús desplegables (Dropdowns) en iOS
En dispositivos iOS, .dropdown-backdrop no se usa dentro del navbar debido a problemas con z-index.
Al cerrar un dropdown, el usuario debe hacer clic directamente en el elemento del menú.
Zoom del navegador
El uso del zoom puede provocar artefactos visuales en algunos componentes de Bootstrap.
Aunque en algunos casos puede haber soluciones, en general estos problemas se consideran inevitables y no se prioriza su corrección debido a la complejidad y los efectos colaterales que pueden causar los workarounds.
Validadores y hacks CSS
Bootstrap incluye algunos hacks CSS intencionados para ofrecer compatibilidad con navegadores antiguos o con bugs conocidos.
Esto puede hacer que ciertos validadores de CSS marquen advertencias, pero no afectan el funcionamiento del framework.
Además, se utilizan algunas características de CSS aún no estandarizadas, exclusivamente como mejoras progresivas.
Conclusión
Bootstrap 5.3 ofrece soporte para una amplia gama de navegadores modernos y dispositivos, pero abandona oficialmente el soporte para Internet Explorer y otros navegadores desactualizados.
Es importante conocer estas limitaciones para evitar comportamientos inesperados en tus proyectos.
Para lograr una compatibilidad óptima, se recomienda siempre probar tus aplicaciones en los navegadores más relevantes para tus usuarios y seguir las buenas prácticas de desarrollo web moderno.
Preguntas frecuentes sobre la compatibilidad de Bootstrap 5.3
¿Qué navegadores son compatibles con Bootstrap 5.3?
Bootstrap 5.3 es compatible con las últimas versiones estables de Chrome, Firefox, Microsoft Edge, Safari y Opera.
¿Bootstrap 5.3 sigue siendo compatible con Internet Explorer?
No. Bootstrap 5.3 no da soporte a Internet Explorer. Se recomienda usar Bootstrap 4 si necesitas compatibilidad con IE.
¿Qué define la compatibilidad de Bootstrap con los navegadores?
Bootstrap usa Autoprefixer y Browserslist a través del archivo .browserslistrc, que define navegadores con al menos el 0.5% de uso, las dos últimas versiones mayores, y excluye navegadores obsoletos.
¿En qué dispositivos móviles funciona correctamente Bootstrap?
Bootstrap funciona bien en navegadores modernos de Android (Chrome, Firefox, WebView) y iOS (Safari, Firefox, Chrome). No se garantiza compatibilidad con navegadores proxy como Opera Mini o UC Browser Mini.
¿Qué navegadores de escritorio son compatibles?
Bootstrap es compatible con los navegadores modernos en macOS (Chrome, Firefox, Safari, Edge, Opera) y en Windows (Chrome, Firefox, Edge, Opera).
¿Existen problemas conocidos con dispositivos móviles?
Sí. Algunos problemas incluyen:
- Modales que no bloquean completamente el fondo en iOS/Android.
- Inputs en modales que desplazan el fondo (iOS).
- Dropdowns que requieren tocar directamente el menú para cerrarse (iOS).
¿El zoom del navegador puede afectar el diseño con Bootstrap?
Sí. El uso de zoom puede causar artefactos visuales. Estos no se consideran bugs críticos y generalmente no se corrigen.
¿Bootstrap usa hacks CSS o propiedades experimentales?
Sí. Incluye algunos hacks intencionados para compatibilidad y algunas propiedades CSS no estándar usadas como mejoras progresivas.
¿Cuál es la recomendación general del equipo de Bootstrap?
Probar las aplicaciones en los navegadores relevantes para tus usuarios y seguir buenas prácticas modernas para garantizar la compatibilidad.
Artículos Relacionados
Descubre más desde CIBERED
Suscríbete y recibe las últimas entradas en tu correo electrónico.