Ocultando elementos em layouts responsivos do Bootstrap

Aprimore o design do Bootstrap otimizando a visibilidade do conteúdo em vários tamanhos de tela. Bootstrap oferece recursos para exibir itens de menu em dispositivos menores, mas e outros elementos da página?

Para resolver isso, Bootstrap fornece classes "visíveis" e "ocultas" que permitem exibir ou ocultar dinamicamente elementos com base na tela tamanho. As classes disponíveis incluem:

Classes visíveis:

• .visible-xs-block: Mostrar em dispositivos extra pequenos (telefones)
• .visible-sm-block: Mostrar em dispositivos pequenos (tablets)
• .visible-md-block: Mostrar em dispositivos médios (desktops)
• .visible-lg-block: Mostrar em dispositivos grandes (desktops)

Classes ocultas:

• .hidden-xs: Ocultar em dispositivos extra pequenos (telefones)
• .hidden-sm: Ocultar em dispositivos pequenos (tablets)
• .hidden-md: ocultar em dispositivos médios (desktops)
• .hidden-lg: ocultar em dispositivos grandes (desktops)

Para ocultar suas pílulas de navegação em telas menores, basta adicionar a classe .hidden-xs ao respectivo contêiner.

...

Como alternativa, você pode usar a classe "hidden-*-down", que oculta elementos no ponto de interrupção especificado ou menor.

...

Lembre-se de usar a classe "visible-*-up" se você quero mostre o elemento no ponto de interrupção especificado ou mais amplo.

Para obter mais informações sobre as classes de utilitário responsivo do Bootstrap, consulte sua documentação oficial em http://getbootstrap.com/css/#responsive-utilities.