Bootstrap: utilidades receptivas

Bootstrap proporciona algunas clases de ayuda para un desarrollo más rápido compatible con dispositivos móviles. Estos se pueden usar para mostrar y ocultar contenido por dispositivo a través de una consulta de medios, combinados con dispositivos grandes, pequeños y medianos.

Úselos con moderación y evite crear versiones completamente diferentes del mismo sitio. Responsive utilities are currently only available for block and table toggling.

Clases	Dispositivos
.visible-xs	Extra pequeño (menos de 768 px) visible
.visible-sm	Pequeño (hasta 768 px) visible
.visible-md	Medio (768 px a 991 px) visible
.visible-lg	Más grande (992 px y superior) visible
.hidden-xs	Extra pequeño (menos de 768 px) oculto
.hidden-sm	Pequeño (hasta 768 px) oculto
.hidden-md	Medio (768 px a 991 px) oculto
.hidden-lg	Más grande (992 px y superior) oculto

Clases de impresión

La siguiente tabla enumera las clases de impresión. Úselos para alternar el contenido para imprimir.

Clases	Impresión
.visible-print	Si visible
.hidden-print	Visible solo para el navegador para no imprimir.

Ejemplo

El siguiente ejemplo demuestra el uso de las clases auxiliares enumeradas anteriormente. Cambie el tamaño de su navegador o cargue el ejemplo en diferentes dispositivos para probar las clases de utilidad de respuesta.

<div class = "container" style = "padding: 40px;">
   <div class = "row visible-on">
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-xs">Extra small</span>
         <span class = "visible-xs">✔ Visible on x-small</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-sm">Small</span>
         <span class = "visible-sm">✔ Visible on small</span>
      </div>
      
      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-md">Medium</span>
         <span class = "visible-md">✔ Visible on medium</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-lg">Large</span>
         <span class = "visible-lg">✔ Visible on large</span>
      </div>
      
   </div>  
</div>

Checkmarks indica que el elemento está visible en su ventana gráfica actual.

↰ Previous page