Em 21/08/2024 | Por Digital Apps | 171 visualizações
Atualização para Bootstrap 5 (2021)
Bootstrap 5 possui um novo ponto de interrupção xxl. Portanto, as classes de exibição têm uma nova camada para oferecer suporte a isso:
Oculto apenas em xxl: d-xxl-none Visível apenas em xxl:
d-none d-xxl-block
Bootstrap 4 (2018)
As classes oculto-* e visível-* não existem mais no Bootstrap 4. Se você deseja ocultar um elemento em camadas ou pontos de interrupção específicos no Bootstrap 4, use as classes de exibição d-* adequadamente.
Lembre-se de que extra pequeno/móvel (anteriormente xs) é o ponto de interrupção padrão (implícito), a menos que seja substituído por um ponto de interrupção maior. Portanto, o infixo -xs não existe mais no Bootstrap 4.
Mostrar/ocultar para ponto de interrupção e para baixo:
hidden-xs-down (oculto-xs) = d-none d-sm-bloco
hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
hidden-md-down (hidden-md hidden-sm oculto-xs) = d-none d-lg-block
hidden-lg-down = d-none d-xl-block
hidden-xl-down (n/a 3.x) = d-none (o mesmo que oculto)
Mostrar/ocultar para ponto de interrupção e superior:
hidden-xs-up = d-none (o mesmo que oculto)
hidden-sm-up = d-sm-none
hidden-md-up = d-md-none
hidden-lg-up = d-lg-none
hidden-xl-up (n/a 3.x) = d-xl-none
Mostrar/ocultar apenas para um único ponto de interrupção:
hidden-xs (somente) = d-none d-sm-block (o mesmo que oculto-xs-down)
hidden-sm (somente) = d-bloco d-sm-none d-md-bloco
hidden-md (somente) = d-bloco d-md-none d-lg-block
hidden-lg (somente) = d-block d-lg-none d-xl-block
hidden-xl (n/a 3.x) = d-block d d-xl-none
visible-xs (apenas) = d-block d d-sm-none
visible-sm (apenas) = d-none d-sm-block d-md-none
visible-md (apenas) = d-none d-md-block d-lg-none
visible-lg (apenas) = d-none d-lg-block d-xl-none
visible-xl (n/a 3.x) = d-none d-xl-bloco
Referência:
https://stackoverflow.com/questions/35351353/missing-visible-and-hidden-in-bootstrap
