INIDOG
bootstrap-logo

부트스트랩 4 브라우저 크기별 요소 가리기/보이기 (hidden, visible)

부트스트랩 4 화면 표시 속성


부트스트랩에서 특정 디바이스의 가로 폭 크기에 대해 해당 클래스가 포함된 태그를 가리거나 보이도록 하는 방법이 있습니다.

부트스트랩 3 이전 버전을 사용했다면 .xs-hidden, .sm-hidden, .lg-visible과 같은 클래스를 아실 것입니다. 그러나 최근 업데이트 된 부트스트랩 4 버전 부터는 해당 클래스를 더 이상 지원하지 않게 되었습니다.

 

그렇다면 어떤 식으로 원하는 요소를 특정 크기에 따라 숨기거나 나타나게 할 수 있을까요?

부트스트랩 4.x부터의 디스플레이 속성 표시 방법은 아래 예시와 같이 변경되었습니다.

<!DOCTYPE HTML>
<html>
    <head>
    ...
    </head>
    <body>
        <div class="container">
            <div class="row">
                <!-- sm 사이즈의 디바이스에서는 가려짐 -->
                <div class=".d-sm-none .d-md-block col-12">
                    콘텐츠
                </div>
            </div>
        </div>
    </body>
</html>

 

d-*-none, d-*-block과 같이 사용되며 특정 디바이스 크기에 대해 두 클래스를 조합해서 사용해야 합니다. 자세한 사용 방법은 아래 표를 참고해주시면 됩니다.

 

화면 크기Class
모든 화면에서 숨기기.d-none
xs 크기에서만 숨기기.d-none .d-sm-block
sm 크기에서만 숨기기.d-sm-none .d-md-block
md 크기에서만 숨기기.d-md-none .d-lg-block
ld 크기에서만 숨기기.d-lg-none .d-xl-block
xl 크기에서만 숨기기.d-xl-none
모든 화면에서 보이기.d-block
xs 크기에서만 보이기.d-block .d-sm-none
sm 크기에서만 보이기.d-block .d-sm-none .d-md-none
md 크기에서만 보이기.d-block .d-md-none .d-lg-none
lg 크기에서만 보이기.d-block .d-lg-none .d-xl-none
xl 크기에서만 보이기.d-none .d-xl-block

 

 

관련 문서


 

 

이 글에 대해 어떻게 생각하시나요?
유용한 포스트였나요? 여러분의 의견을 하단의 Vote와 댓글로 남겨주세요 🙂
유용합니다!
아쉽습니다.

여러분의 의견을 댓글로 남겨주세요.

avatar
error: