Bootstrap - utilitários responsivos

O Bootstrap fornece algumas classes auxiliares para um desenvolvimento mais rápido e compatível com dispositivos móveis. Eles podem ser usados para mostrar e ocultar conteúdo por dispositivo por meio de consulta de mídia, combinado com dispositivos grandes, pequenos e médios.

Use-os com moderação e evite criar versões totalmente diferentes do mesmo site. Responsive utilities are currently only available for block and table toggling.

Aulas	Dispositivos
.visible-xs	Extra pequeno (menos de 768 px) visível
.visible-sm	Pequeno (até 768 px) visível
.visible-md	Médio (768 px a 991 px) visível
.visible-lg	Maior (992 px e acima) visível
.hidden-xs	Extra pequeno (menos de 768 px) oculto
.hidden-sm	Pequeno (até 768 px) oculto
.hidden-md	Médio (768 px a 991 px) oculto
.hidden-lg	Maior (992 px e acima) oculto

Imprimir aulas

A tabela a seguir lista as classes de impressão. Use-os para alternar o conteúdo para impressão.

Aulas	Impressão
.visible-print	Sim Visível
.hidden-print	Visível apenas para o navegador não imprimir.

Exemplo

O exemplo a seguir demonstra o uso das classes auxiliares listadas acima. Redimensione seu navegador ou carregue o exemplo em diferentes dispositivos para testar as classes de utilitário responsivas.

<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 o elemento está visível em sua janela de visualização atual.