Media Queries con Bootstrap

¿Qué son las Media Queries?

Las Media Queries son una técnica de CSS que permite aplicar estilos condicionales según ciertos criterios, como el tamaño de la pantalla. Son fundamentales para lograr un diseño web responsivo y adaptar la apariencia de un sitio a diferentes dispositivos.

¿Cómo utilizar Media Queries con Bootstrap?

Bootstrap facilita la creación de sitios web responsivos con su sistema de rejillas y clases de utilidad. A continuación, se presenta un ejemplo de cómo puedes utilizar Media Queries con Bootstrap:

<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <p>Contenido para pantallas grandes</p>
    </div>
    <div class="col-lg-6 d-none d-lg-block">
      <p>Contenido visible solo en pantallas grandes</p>
    </div>
  </div>
</div>

En este ejemplo, el segundo elemento dentro de la rejilla es visible solo en pantallas grandes (d-none d-lg-block).

Ejemplos Prácticos

Veamos algunos ejemplos prácticos de Media Queries en acción:

@media screen and (max-width: 768px) {
  body {
    background-color: #f8f9fa;
    color: #343a40;
  }
}

@media screen and (max-width: 576px) {
  h2 {
    color: #007bff;
  }
}

Estos ejemplos aplican estilos específicos cuando el ancho de la pantalla es menor que ciertos límites. Puedes ajustar estos límites según tus necesidades.

Conclusión

El uso efectivo de Media Queries en combinación con Bootstrap te permite crear sitios web modernos y responsivos. Ajusta tus estilos y contenido según el tamaño de la pantalla para proporcionar una experiencia de usuario óptima en una variedad de dispositivos.