[Bootstrap] 반응 형 레이아웃에서 요소를 숨기기 > 기술자료

• 목록

부트 스트랩 v4.0.0 ~
초소형 휴대 전화  (<768px)(Class names : .visible-xs-block, hidden-xs)
대형 장치 데스크톱  (≥1200px)(Class names : .visible-lg-block, hidden-lg)
소형 장치 태블릿  (≥768px)(Class names : .visible-sm-block, hidden-sm)
중형 장치 데스크톱  (≥992px)(Class names : .visible-md-block, hidden-md)


부트 스트랩 4에는 두 가지 유형의 클래스가 있습니다.
hidden-*-up  뷰포트가 지정된 중지 점 또는 넓은 일 때 요소를 숨길 수있다.
hidden-*-down  뷰포트가 지정된 중단 점 이하일 때 요소를 숨 깁니다.


부트 스트랩 v3.2.0 ~ v4.0.0
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }


부트 스트랩 v3.2.0 미만
초소형 휴대 전화  (<768px) (Class names : .visible-xs, hidden-xs)
소형 장치 태블릿  (≥768px) (Class names : .visible-sm, hidden-sm)
중형 장치 데스크톱  (≥992px) (Class names : .visible-md, hidden-md)
대형 장치 데스크톱  (≥1200px) (Class names : .visible-lg, hidden-lg)


참고자료
https://qastack.kr/programming/14207109/hiding-elements-in-responsive-layout
https://getbootstrap.com/docs/3.4/css/