En los últimos años Bootstrap se ha consagrado como el framework favorito entre los diseñadores web para realizar la maquetación de portales. Su éxito principalmente se debe a las necesidades de hacer proyectos adaptables a diferentes resoluciones de pantalla, lo que se conoce comúnmente como diseño responsive.
Como ya sabrás, para conseguir que esta adaptabilidad sea sencilla, Bootstrap usa un sistema de cuadrículas y una serie de clases CSS construidas con distintos sufijos que nos permiten controlar el aspecto que el diseño tendrá en cada resolución. Pues bien, si estás usando el infijo -xs para el tamaño más pequeño y el navegador no está reconociendo la clase, la razón es mas sencilla de lo que puedes creer y es que con toda probabilidad estás usando la versión 4 de este framework.
En la versión 4 el sistema de cuadrículas se modifica respecto a la 3 para ofrecer soporte a dispositivo mayores. Es por eso que se añade el nuevo infijo -xl para poder configurar un mayor rango de resoluciones y al mismo tiempo -xs queda obsoleto. Si queremos acceder al menor tamaño sencillamente no debemos especificar nada. Con un ejemplo comparando ambas versiones quedará más claro:
<div class="row">
<div class="col-xs-12">
Bootstrap 3
</div>
</div>
<div class="row">
<div class="col-12">
Bootstrap 4
</div>
</div>Para finalizar, a aquellos desarrolladores web que están cambiando desde la versión 3 a la 4, les recomiendo que visiten el manual de migración de Bootstrap, ya que hay bastantes cosas que se han modificado y os puede ser de gran utilidad.
Deja una respuesta