Media Query en Bootstrap

Media Query en Bootstrap

Si has oído hablar de media query, pero aún no conoces realmente que son y como puedes usarlas, hoy te explico qué son y cómo aprovecharlas junto al framework de moda: Bootstrap.

Antes de explicarte que media querys son las usadas en Bootstrap, te explico brevemente que son las media querys.

Media Querys en Bootstrap

¿Qué es una media query?

Las Media Queries son herramientas 100% indispensables para cualquier diseñador web actual. Es el pilar donde se sustenta el diseño web responsive o adaptable a cualquier dispositivo. Si haces un buen uso de estas herramientas, una maquetación HTML, sin necesidad de modificarla, se verá correctamente en cualquier dispositivo, sea móvil o PC.

En esencia, una Media Query es una regla que se introduce en tu hoja de estilos CSS, y que actúa solamente en los casos que definas dentro de la propia Media Query. Por ejemplo, puedes definir una Media Query para qué las reglas CSS que estén dentro de la misma, actúen en dispositivos con un mínimo de pixels de ancho de pantalla.

Existen diferentes Medias Querys para funcionar en muchas situaciones o dispositivos. En esta entrada vamos a centrarnos en las relacionadas directamente en el diseño web responsive, y en concreto en las que afectan a Bootstrap.

¿Qué es BootStrap?

Bootstrap es un framework muy extendido entre la comunidad de diseñadores web por su fácil aprendizaje y por su excelente funcionamiento multiplataforma. En esencia, es un conjunto de herramientas CSS creadas para agilizar y estandarizar el diseño web responsive.

Contiene numerosas aplicaciones para tipografía, formularios, botones, cuadros, menús de navegación, incluyendo además otros elementos de diseño basado en HTML y CSS.

Diseño web responsive con Bootstrap

Media Query de Bootstrap

Una de las principales funcionalidades que incorpora Bootstrap a la hora de maquetar un diseño web responsive, sobre todo a partir de la versión 3, son los breakpoints o media querys.

Estos breakpoint de bootstrap definen el comportamiento de algunas de las clases de bootstrap según que dispositivo sea el que muestre la web. Es decir, con los breakpoint puedes indicar que un mismo <div> se vea de una forma en PC y de otra diferente en móvil. Por supuesto, el diseño web con Bootstrap, siempre debe basarse en metodología mobile first, es decir, debes comenzar la maquetación de tu web primero en versión móvil, y luego con las media querys, adaptar la maquetación al resto de dispositivos.

Pasemos a ver los breakpoints de bootstrap principales.

Media Querys de Boostrap 3

Aunque Bootstrap 3 está totalmente obsoleto, podrías encontrarte con la necesidad de recurrir a esta versión del framework. Por lo tanto, te detallo a continuación cuáles son los breakpoints de esta versión:

  • Dispositivos “Extra small”. Dispositivos de menos de 768px de ancho (<768px).
  • Dispositivos “Small devices”. Dispositivos de 768px o más (≥768px). En el grid, la nomenclatura es “sm”.
  • Dispositivos “Medium devices”. Dispositivos de 992px o más (≥992px). En el grid, la nomenclatura es “md”.
  • Dispositivos “Large devices”. Dispositivos de 1200px o más (≥1200px). En el grid, la nomenclatura es “lg”.

Media Querys de Boostrap 4

Bootstrap 4, en la actualidad está vigente aunque en pocos meses saldrá la versión estable de BootStrap 5 con números mejoras. Aún así, la versión 4.6 de Bootstrap 4 es la más actualizada y estable. Por ello, paso a indicarte cuáles son el breakpoints de bootstrap 4:

  • Dispositivos “Extra small”. Dispositivos de menos de 576px (<576px). En la rejilla de bootstrap no tiene nomenclatura.
  • Dispositivos “Small”. Dispositivos de más de 576px (≥576px). En la rejilla de bootstrap la nomenclatura es “sm”.
  • Dispositivos “Medium”. Dispositivos de más de 768px (≥768px). En la rejilla de bootstrap la nomenclatura es “md”.
  • Dispositivos “Large”. Dispositivos de más de 992px (≥992px). En la rejilla de bootstrap la nomenclatura es “lg”.
  • Dispositivos “Extra large”. Dispositivos de más de 1200px (≥1200px). En la rejilla de bootstrap la nomenclatura es “xl”.

Conclusión

Con esta entrada espero haberte ayudado a conocer y comprender las media querys más importante de BootStrap. Si te ha servido de ayuda o tienes alguna duda, puedes dejarme un comentario y te responderé en cuanto pare un segundo de diseñar webs 🙂

¡Hasta pronto!

Dejar una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar estas etiquetas y atributos HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>